三、TypeScript的编译选项

郁子大约 4 分钟约 1096 字笔记TypeScript尚硅谷李立超

（一）自动编译文件

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

（二）自动编译整个项目

  • 如果直接使用 tsc 指令，可以自动将当前项目下的所有 ts 文件编译为 js 文件
  • 使用前提是项目根目录下必须创建一个 ts 的配置文件 tsconfig.json
  • ** 表示任意目录
  • * 表示任意文件

1.include

  • 定义希望被编译文件所在的目录
  • 默认值：["**/**"]
// 所有src目录和tests目录下的文件都会被编译
{
  "include": ["src/**/*", "tests/**/*"]
}

2.exclude

  • 定义需要排除在外的目录
  • 默认值：["node_modules", "bower_components", "jspm_packages"]
// 所有src目录下的hello目录下的文件都不会被编译
{
  "exclude": ["./src/hello/**/*"]
}

3.extends

  • 定义被继承的配置文件
// 当前配置文件中会自动包含configs目录下的base.json中的所有配置信息
{
  "extends": "./configs/base"
}

4.files

  • 指定被编译文件的列表，只有需要编译的文件少时才会用到
{
  "files": ["core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts"]
}

5.compilerOptions

  • 该编译选项是配置文件中非常重要也比较复杂的配置选项
  • 包含多个子选项，用来完成对编译的配置

1）target

  • 设置 ts 代码编译的目标版本
  • 可选值：ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
// ts代码会被编译成ES6版本的js代码
{
  "compilerOptions": {
    "target": "ES6"
  }
}

2）lib

  • 指定代码运行时所包含的库（宿主环境）
  • 可选值：ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost......
// ts代码会被编译成ES6版本的js代码
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"]
  }
}

3）module

  • 设置编译后代码使用的模块化系统
  • 可选值：CommonJS、UMD、AMD、System、ES2020、ESNext、None
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS"
  }
}

4）outDir

  • 编译后文件的所在目录
  • 默认情况下，编译后的 js 文件会和 ts 文件位于相同的目录，设置 outDir 后可以改变编译后文件的位置
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist"
  }
}

5）outFile

  • 所有的全局作用域中的代码会合并到同一个文件中
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js"
  }
}

6）allowJs

  • 是否对 js 文件进行编译，默认为 false
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false
  }
}

7）checkJs

  • 是否检查 js 代码是否符合语法规范，默认为 false
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false
  }
}

8）removeComments

  • 是否移除注释，默认为 false
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false
  }
}

9）noEmit

  • 是否不生成编译后的文件，默认为 false
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false,
    "noEmit": false
  }
}

10）noEmitOnError

  • 有错误时是否不生成编译后的文件，默认为 false
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false,
    "noEmit": false,
    "noEmitOnError": false
  }
}

11）alwaysStrict

  • 设置编译后的文件是否使用严格模式（ES5），默认为 false
  • 如果代码中有 import 语句，则编译后自动进入严格模式
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false,
    "noEmit": false,
    "noEmitOnError": false,
    "alwaysStrict": false
  }
}

12）noImplicitAny

  • 是否不允许出现隐式 any 类型，默认为 false
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false,
    "noEmit": false,
    "noEmitOnError": false,
    "alwaysStrict": false,
    "noImplicitAny": false
  }
}

13）noImplicitThis

  • 是否不允许不明确类型的 this，默认为 false
function fn(this: Window) {
  alert(this);
}

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false,
    "noEmit": false,
    "noEmitOnError": false,
    "alwaysStrict": false,
    "noImplicitAny": false,
    "noImplicitThis": false
  }
}

14）strictNullChecks

  • 是否严格地检查空值，默认为 false
let box1 = document.getElementById("box1");

// // box1可能为null值
// box1.addEventListener("click", function () {
//   alert("hello");
// });

if (box1 !== null) {
  box1.addEventListener("click", function () {
    alert("hello");
  });
}
// 或者
box1?.addEventListener("click", function () {
  alert("hello");
});

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false,
    "noEmit": false,
    "noEmitOnError": false,
    "alwaysStrict": false,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": false
  }
}

15）strict

  • 所有严格检查的总开关，默认为 false
{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "module": "CommonJS",
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": false,
    "checkJs": false,
    "removeComments": false,
    "noEmit": false,
    "noEmitOnError": false,
    "strict": true
    // 以下设置无效
    // "alwaysStrict": false,
    // "noImplicitAny": false,
    // "noImplicitThis": false,
    // "strictNullChecks": false
  }
}
上次编辑于: