从 JavaScript 到 TypeScript 3 - 引入和编译

随着应用的庞大，项目中 JavaScript 的代码也会越来越臃肿，这时候许多 JavaScript 的语言弊端就会愈发明显，而 TypeScript 的出现，就是着力于解决 JavaScript 语言天生的弱势：静态类型。

前端开发 QQ 群：377786580

这篇文章首发于我的个人博客 《听说》，系列目录：

在上一篇文章 《从 JavaScript 到 TypeScript 2 - 基础特性和类型推导》 中我们讨论了一些基本的 TypeScript 类型特性。许多人摩拳擦掌跃跃欲试，这篇文章我们主要介绍如何引入和编译 TypeScript。

快速使用

安装：

1
$ npm i -g typescript

编译：

1
$ tsc helloworld.ts

如果我们想快速测试一个文件，可以使用 ts-node，ts-node 可以让我们通过命令直接执行 *.ts 文件：

1
2
3
4
5
$ npm i -g ts-node

# 执行当前文件夹下 demo.ts 文件
$ ts-node demo.ts
# 输出的执行结果

关于 tsc，一般来说，全局安装的方案并不是很棒，我们可以把 typescript 安装到本地项目目录中：

1
$ npm i  --save-dev typescript

这样在 package.json 的 scripts 中可以引用 tsc 命令：

1
2
3
4
5
6
7
8
9
10
{
  // ...
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    // ...
    "typescript": "^2.4.2",
  },
}

使用 npm run build 命令即可启用 tsc 命令编译本地目录，typescript 会去查找目录下的 tsconfig.json 配置文件。

引入 TypeScript 非常简单，TypeScript 的文件后缀为 ts，迁移 TypeScript 只需要将项目中，业务代码的 *.js 修改为 *.ts 即可。不过在此之后你会看到大量的报错，然后就是按照 TypeScript 的规则，解决这些报错即可:)

引入和编译-类型报错

tsconfig.json

tsconfig.json 是 TypeScript 的编译选项文件，通过配置它来定制 TypeScript 的编译细节。

  • 直接调用 tsc，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。
  • 调用 tsc -p，可以指定一个包含 tsconfig.json文件的目录进行编译。如果没有找到 tsconfig.json 文件，TypeScript 会编译每个文件并在对应文件的同级目录产出。

如果你要编译的是一个 Node 项目，请先安装 Node 编译依赖： npm i @types/node --save-dev，否则会出现 Node 内置模块无法找到的情况。

一个 tsconfig.json 文件描述：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
  // 编译选项
  "compilerOptions": {
    // 输出目录
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以严格模式解析
    "strict": true,
    // 采用的模块系统
    "module": "esnext",
    // 如何处理模块
    "moduleResolution": "node",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 将每个文件作为单独的模块
    "isolatedModules": false,
    // 启用装饰器
    "experimentalDecorators": true,
    // 启用设计类型元数据（用于反射）
    "emitDecoratorMetadata": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 不是函数的所有返回路径都有返回值时报错。
    "noImplicitReturns": true,
    // 从 tslib 导入外部帮助库: 比如__extends，__rest等
    "importHelpers": true,
    // 编译过程中打印文件名
    "listFiles": true,
    // 移除注释
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 指定特殊模块的路径
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // typescript 语法检测支持的版本库，注意不是 polyfill！只是为了有对应版本的代码特性提示！
    "lib": [
      "es2015",
      "es2015.promise"
    ]
  }
}

完整 tsconfig 配置选项的可以参考 这里，或者 tsconfig 的 json-schema。

注意： TypeScript 不会做 Polyfill，例如从 es6 编译到 es5，TypeScript 编译后不会处理 es6 的那些新增的对象的方法，如果需要 polyfill 需要自行处理！

完整的编译选项请参阅 TypeScript 中文网 和 TypeScript 官网。

编译

大多数前端已经使用各种各样的构建工具，完整构建工具集成列表参见 这里

对于 Node 项目，建议搭配 gulp 使用。不过个人更喜欢通过 npm scripts 脚本组合命令，然后直接使用 tsc 编译，例如我自己的编译方案。

项目目录为：

1
2
3
4
5
|---output # 编译输出
|---client
|---server # node ts 文件目录
      |--tsconfig.json
|---package.json

package.json 中 scripts 脚本如下：

1
2
3
4
5
6
7
"scripts": {
  "dev": "nodemon --ext ts --watch server --exec \"npm run clean && npm run build:ts && npm run server\"",
  "server": "cross-env NODE_ENV=development node ./output/app.js",
  "clean": "rm -rf ./output.server",
  "build:ts": "tsc -p ./server",
  "build": "npm run clean && npm run build:ts"
}
  • 使用 nodemon 监听整个 server 目录文件改动并执行脚本
  • npm run clean 用于清空编译输出目录
  • npm run build:ts 用于编译 server 目录下的 TypeScript 文件
  • npm run server 用于启动编译后的 node 服务器。

平常开发只需要 npm run dev，生产使用 npm run build 产出文件即可。

visual studio code 集成和 debug

编译任务

visual studio code 编译 TypeScript 非常简单，根据上面我自己的组合命令，只需要在 vs code 的任务中加入编译脚本即可（npm run build-ts）：

./.vscode/task.json 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "version": "2.0.0",
  "tasks": [
    {
      // npm 命令
      "type": "npm",
      // npm run 的脚本
      "script": "build-ts",
      // 标签
      "label": "build-typescript",
      // 默认任务
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

按 control+shift+B 即可编译。

编译 Code

debug

在 ./.vscode/launch.json 中加入如下代码即可调试，记得要在 tsconfig.json 里打开 sourceMap 选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "version": "0.2.0",
  "configurations": [
    {
      // 调试前运行的任务 (task)，就是上面编译任务中的 label
      "preLaunchTask": "build-typescript",
      // 调试任务名称
      "name": "server debug",
      "env": {
        // 传递的参数
        "NODE_ENV": "development"
      },
      // 调试的 node 入口文件，注意 tsconfig.json 里面要打开 sourceMap
      "program": "${workspaceRoot}/output/app.js"
    }
  ]
}

然后在 vs code 中给代码打上断点，按 F5，一步步调试即可。

vscode debug

结语

我们简单总结一下：

  • 使用 ts-node 可以让我们直接运行 *.ts 文件（不过只建议临时运行代码或特殊应用场景使用）
  • 使用 typescript 产出的 tsc 命令来编译 *.ts 文件到 *.js，然后我们运行编译出来的 *.js 文件即可
  • 使用 tsconfig.json 配置 TypeScript 的编译选项

在下一篇，我们将了解逐渐盛行的 ECMAScript 特性在 TypeScript 上的应用：《从 JavaScript 到 TypeScript 4 - 装饰器和反射》

 

TypeScript 中文网：https://tslang.cn/

TypeScript 视频教程：《TypeScript 精通指南》

技术
#TypeScript
从 JavaScript 到 TypeScript 3 - 引入和编译
https://tasaid.com/posts/9699a7a8/
作者
linkfly
发布于
2017年10月11日
更新于
2019年7月29日
许可协议