正文

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

IP云
IP云V管理员/15 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

相关阅读

目录[+]