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

时间 2019-11-24

标签使用 vscode 搭建 typescript 开发环境重点繁體版

原文原文链接

下载TypeScript

在CMD（Windows系统）或者终端（macOS系统）中输入一下命令：css

npm install -g typescript

下载VSCode

VSCode是我使用过最棒的编辑器没有之一，比Sublime Text还有优秀。html

建立项目

建立目录

首先咱们建立一个项目文件夹，好比叫ts_vscode，而后建立一些主要目录，在VSCode中打开项目html5

目录结构：node

ts_vscode/
    └─src/
        ├─ css/
        ├─ fonts/
        └─ images/

在ts_vscode  中 按shift 右键 命令行中打开。   输入 code . 打开项目

建立`package.json`

使用命令npm init来建立package.json文件，通常默认就能够，具体详情能够看这里。jquery

目录结构：nginx



ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    └─ package.json

建立`tsconfig.json`

使用tsc --init命令就能够快速建立一个tsconfig.json文件，关于tsconfig.json的属性描述请访问这里。sql

目录结构：typescript

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ package.json └─ tsconfig.json

安装项目依赖和开发依赖

咱们的这个项目使用jQuery和Bootstrap来作，所以咱们使用npm来安装：shell

npm install jquery bootstrap --save

咱们的项目使用了TypeScript来开发，所以咱们须要下载相对应的声明文件，关于声明文件请访问这里。安装声明文件命令：npm

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 是