知识点

TypeScript 基础-编译(第二章)

使用

  • 安装 Node.js
  • 安装 typescript
  • 使用 tsc xx.ts 将 TS 代码编译成 JS 代码

编译

1. 自动编译文件

编译文件时，使用 -w 指令后，TS 编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

1
tsc xxx.ts -w

2. 自动编译整个项目

  • 先在项目根目录下创建一个 TS 的配置文件 tsconfig.json，之后直接使用tsc指令，则可以自动将当前项目下的所有 TS 文件编译为 JS 文件。
  • 可以手动添加，或者使用 tsc --init 直接生成一个模板 tsconfig.json

2.1. 配置选项

2.1.1. include
  • 定义希望被编译文件所在的目录
  • 默认值：["\*\*/\*"]
  • 示例：
    1
    2
    3
    // 所有src目录和tests目录下的文件都会被编译
    // 单个`*` 表示文件，`**` 则表示目录
    "include":["src/**/*", "tests/**/*"]
2.1.2. exclude
  • 定义需要排除在外的目录
  • 默认值：["node_modules", "bower_components", "jspm_packages"]
  • 示例：
    1
    2
    // src下hello目录下的文件都不会被编译
    "exclude": ["./src/hello/**/*"]
2.1.3. extends
  • 定义被继承的配置文件
  • 示例： 
    1
    2
    // 当前配置文件中会自动包含 config 目录下 base.json 中的所有配置信息
    "extends": "./configs/base"
2.1.4. files
  • 指定被编译文件的列表，只有需要编译的文件少时才会用到
  • 示例：
    1
    2
    3
    4
    5
    6
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        ...
      ]
2.1.5. compilerOptions
  • 编译选项是配置文件中非常重要也比较复杂的配置选项
  • 其包含多个子选项，用来完成对编译的配置

    • target

      • 设置ts代码编译的目标版本
      • 可选值：ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext（最新版）
      • 示例：
        1
        2
        3
        "compilerOptions": {
            "target": "ES6"
        }

    • module

      • 设置编译后代码使用的模块化系统
      • 可选值：CommonJS、UMD、AMD、System、ES6/ES2015、ES2020、ESNext、None
      • 示例：
        1
        2
        3
        "compilerOptions": {
            "module": "CommonJS"
        }

    • lib

      • 指定代码运行时所包含的库（宿主环境），一般不需要改动，默认是浏览器使用的环境库
      • 可选值：ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost、...
      • 示例：
        1
        2
        3
        4
        "compilerOptions": {
            "target": "ES6",
            "lib": ["ES6", "DOM"]
        }

    • outDir

      • 设置编译后文件的所在目录，默认情况下，编译后的 JS 文件与 TS 文件位于相同的目录
      • 示例：
        1
        2
        3
        4
        // 编译后的 JS 文件将会生成到dist目录
        "compilerOptions": {
            "outDir": "dist"
        }

    • outFile

      • 默认会将所有的编写在全局作用域中的代码合并为一个 JS 文件
      • 如果 module 制定了 None、System 或 AMD ，则会将模块一起合并到文件之中
      • 一般不指定，而是使用打包工具实现
      • 示例：
        1
        2
        3
        "compilerOptions": {
            "outFile": "dist/app.js"
        }

    • rootDir

      • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
      • 示例：
        1
        2
        3
        "compilerOptions": {
            "rootDir": "./src"
        }

    • allowJs

      • 是否对 JS 文件编译
      • 默认值：false

    • checkJs

      • 是否对 JS 文件进行语法检查
      • 默认值：false
      • 示例：
        1
        2
        3
        4
        "compilerOptions": {
            "allowJs": true,
            "checkJs": true
        }

    • removeComments

      • 是否删除注释
      • 默认值：false

    • noEmit

      • 不对代码进行编译，一般是用作 TS 的语法校验
      • 默认值：false

    • noEmitOnError

      • 有错误的情况下不进行编译
      • 默认值：false

    • strict

      • 启用所有的严格检查，设置后相当于开启了所有的严格检查，建议true
      • 默认值：false

    • alwaysStrict

      • 是否以严格模式对代码进行编译，当使用 import、export时，自动进入严格模式
      • 默认值：false

    • noImplicitAny

      • 禁止隐式的any类型，即不指定参数类型
      • 默认值：false

    • noImplicitThis

      • 禁止类型不明确的this
      • 默认值：false

    • strictNullChecks

      • 严格的空值检查
      • 默认值：false