使用VSCode搭建TypeScript开发环境 (重点)

下载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 --save

我们的项目使用了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 是