|
下载TypeScript
在CMD（Windows系统）或者终端（macOS系统）中输入一下命令：
npm install -g typescript
下载VSCode
VSCode是我使用过最棒的编辑器没有之一，比Sublime Text还有优秀。
创建项目
创建目录
首先我们创建一个项目文件夹，比如叫ts_vscode，然后创建一些主要目录，在VSCode中打开项目
目录结构：
ts_vscode/
└─src/
├─ css/
├─ fonts/
└─ images/
在ts_vscode 中 按shift 右键 命令行中打开。 输入 code . 打开项目
创建package.json
使用命令npm init来创建package.json文件，一般默认就可以，具体详情可以看这里。
目录结构：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ └─ images/
└─ package.json
创建tsconfig.json
使用tsc --init命令就可以快速创建一个tsconfig.json文件，关于tsconfig.json的属性描述请访问这里。
目录结构：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ └─ images/
├─ package.json
└─ tsconfig.json
安装项目依赖和开发依赖
我们的这个项目使用jQuery和Bootstrap来做，因此我们使用npm来安装：
npm install jquery bootstrap
我们的项目使用了TypeScript来开发，因此我们需要下载相对应的声明文件，关于声明文件请访问这里。安装声明文件命令：
npm install @types/jquery @types/bootstrap -save-dev
创建index.html
在ts_vscode目录下创建index.html，index.html文件中放入下面的代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TypeScript with VSCode</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="./src/css/index.css">
</head>
<body>
<h1 class="text-center"></h1>
<div class="container">
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-6">
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</div>
</div>
</div>
<!-- /.modal -->
<!-- js -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./src/index.js"></script>
</body>
</html>
目录结构：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ └─ images/
├─ index.html
├─ package.json
└─ tsconfig.json
创建index.ts文件并编写TS代码
在src目录下创建index.ts文件。我们使用TS编写一个类，并使用这个类的方法向index.html的h1标签中插入一句话，代码如下：
class Main {
constructor() {
}
name: string;
show(text: string): void {
let $ele: JQuery = $("h1");
$ele.text(text);
}
}
let main = new Main();
main.name = "Hello TypeScript";
main.show(main.name);
目录结构：
ts_vscode/
├─ src/
│ ├─ css/
│ ├─ fonts/
│ ├─ images/
│ └─ index.ts
├─ index.html
├─ package.json
└─ tsconfig.json
编译和启动项目
我们使用package.json中的scripts来编译和启动项目。
编译比较简单，tsc命令就可以编译项目，tsc -w命令监控并自动编译，编译会使用tsconfig.json中的配置项。
启动项目我们安装live-server，来帮助我们启动一个服务器环境，live-server非常轻便且带有自动刷新功能，我们使用npm全局安装即可：
npm install -g live-server
安装完毕后，我们修改package.json中的scripts如下：
"scripts": {
"test": "tsc -w & live-server"
}
最终目录结构：
最后我们在终端中输入npm t就可以启动项目了.
npm t 是
|
客服电话
APP下载
官方微信
请发表评论