TypeScript 编译选项

fishmemory7sec

已于 2024-08-12 19:04:48 修改

阅读量968

点赞数 25

分类专栏： TypeScript 文章标签： typescript javascript

于 2024-08-10 22:57:40 首次发布

本文链接：https://blog.csdn.net/fishmemory7sec/article/details/141092069

版权

TypeScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

编译TS

编译 `.ts` 文件：

tsc app.ts

执行命令tsc app.ts 可以把单个文件 app.ts编译成 app.js。
这个命令需要每次编译时手动执行。

自动编译文件

tsc app.ts -w
// 或者
tsc app.ts --watch

通常 -w 或 --watch 指令用于启动 TypeScript 编译器的监视模式。

编译文件时，使用 -w 或 --watch 指令后，TS编译器会监视指定的 TypeScript 文件或文件目录。如果任何被监视的文件发生变化，编译器会自动重新编译这些文件，确保生成的 JavaScript 文件始终是最新的。

注意：自动编译在保存代码后才开始执行。

自动编译整个项目

假设项目目录如下：

project/
├── src/
│   ├── index.ts
│   └── utils.ts
├── tsconfig.json
└── dist/

在项目根目录下运行 tsc 命令，会自动将当前项目下的所有.ts文件编译为.js文件。
在项目根目录下运行tsc -w命令，编译器会监视 src 目录下的所有 .ts 文件。
当对 index.ts 或 utils.ts 进行修改并保存时，编译器会自动重新编译这些文件，并将生成的 JavaScript 文件输出到 对应的 目录中（这个对应的目录配置在tsconfig.json）。

以上两个操作能成功实现的前提是：先在项目根目录下创建一个 ts 的配置文件tsconfig.json。

创建`tsconfig.json`文件

手动创建：在项目的根目录下创建一个名为 tsconfig.json 的文件。
使用命令行工具自动生成：

tsc --init

执行命令后，在当前目录下生成一个 tsconfig.json 文件，其中包含了一些默认的配置选项。

有了tsconfig.json 文件后，即使文件里没有任何配置，也能成功执行 tsc 、tsc -w、 tsc --watch命令。
命令执行成功后，.ts文件和编译后的.js文件在同一个目录下。
在这里插入图片描述

配置 `tsconfig.json`

tsconfig.json是 TypeScript 项目的配置文件，用于指定 TypeScript 编译器的编译选项。
ts 编译器可以根据它的信息来对代码进行编译。

基本结构

{
  "compilerOptions": {
    // 编译器选项
  },
  "include": [
    // 要包含的文件或目录
  ],
  "exclude": [
    // 要排除的文件或目录
  ]
}

配置选项

注意：** 表示任意目录， * 表示任意文件

`include`

指定要包含在编译中的文件或目录。
默认值：["**/*"]。
include是一个数组，其中的每个元素可以是以下的形式：
- 具体的文件路径：例如 "src/index.ts"，指定单个 TypeScript 文件。
- 目录路径：例如 "src"，表示包含指定目录下的所有 TypeScript 文件。可以使用通配符来进一步指定要包含的文件，例如 "src/**/*" 表示包含 src 目录及其子目录下的所有文件。

示例：

{
  "compilerOptions": {
    // 编译器选项
  },
  "include": [
    "src/**/*",
    "tests/**/*.ts"
  ],
  "exclude": [
    // 要排除的文件或目录
  ]
}

在这个例子中，include 数组指定了两个路径：

"src/**/*"：表示包含 src 目录及其子目录下的所有文件。
"tests/**/*.ts"：表示包含 tests 目录及其子目录下的所有以 .ts 结尾的文件。

`exclude`

指定要被 TypeScript 编译器排除的文件或目录。
默认值：["node_modules", "bower_components ", "jspm_packages"]。
exclude是一个数组，其中的每个元素可以是以下的形式：
- 具体的文件路径：例如 "src/ignoredFile.ts"，指定单个要排除的 TypeScript 文件。
- 目录路径：例如 "node_modules"，表示排除指定目录下的所有文件。可以使用通配符来进一步指定要排除的文件，例如 "src/**/*.test.ts" 表示排除 src 目录及其子目录下所有以 .test.ts 结尾的文件。

示例：

{
  "compilerOptions": {
    // 编译器选项
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "src/ignoredDirectory/**/*"
  ]
}

在这个例子中，exclude 数组指定了三个路径：

"node_modules"：排除项目中的所有 node_modules 目录，这是常见的做法，因为通常不需要编译第三方库的代码。
"dist"：排除已经生成的输出目录，避免重复编译已有的编译结果。
"src/ignoredDirectory/**/*"：排除 src 目录下的 ignoredDirectory 子目录及其所有内容。

`extends`

允许一个配置文件继承另一个配置文件的设置。
注意事项：
- 继承顺序：如果多个配置文件相互继承，继承的顺序是从最基础的配置文件开始，依次向当前配置文件传递。如果多个配置文件中存在相同的设置，后面的配置文件会覆盖前面的设置。
- 相对路径：extends 属性中指定的路径可以是相对路径或绝对路径。相对路径是相对于当前配置文件所在的目录。
- 循环继承：要避免配置文件之间的循环继承，这会导致编译错误。

示例：

{
  "extends": "./config/base",
  // "extends": "./config/base.json", // 两种写法都可以
  "compilerOptions": {
    // 编译器选项
  },
  "include": [
  	// 要包含的文件或目录
  ],
  "exclude": [
  	// 要排除的文件或目录
  ]
}

在这个例子中，当前配置文件中会自动包含config目录下base.json中的所有配置信息。

`files`

用于指定一个明确的被编译文件列表。当项目中只有很少的文件需要编译时，这个属性才被使用。

示例：

{
  "compilerOptions": {
    // 编译器选项
  },
  "files": [
    "file1.ts",
    "file2.ts"
  ]
}

在这个例子中，只有file1.ts和file2.ts这两个文件会被 TypeScript 编译器编译。

`compilerOptions`

在 tsconfig.json 文件中，compilerOptions 是一个非常重要的部分，用于配置 TypeScript 编译器的各种选项。

target
- 指定编译生成的 JavaScript 代码的目标版本。
- 可选值：‘es3’（默认值）, ‘es5’, ‘es6’, ‘es2015’, ‘es2016’, ‘es2017’, ‘es2018’, ‘es2019’, ‘es2020’, ‘es2021’, ‘es2022’, ‘es2023’, ‘esnext’。

示例：

{
  "compilerOptions": {
  	"target": "es6"  // es6 和 es2015是一模一样的，推荐使用es6/es2015
  },
}

在示例中，指定项目中的ts代码将被编译为ES6版本的js代码。

module
- 指定生成的模块系统类型（指定要使用的模块化的规范）。
- 可选值：‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es6’, ‘es2015’, ‘es2020’, ‘es2022’, ‘esnext’, ‘node16’, ‘nodenext’, ‘preserve’。

示例：

{
  "compilerOptions": {
  	"module": "es6"  // es6 和 es2015是一模一样的，推荐使用es6/es2015
  },
}

outDir
- 指定输出目录。编译后的 JavaScript 文件将被输出到这个目录。
- 可以将编译后的文件与源文件分开管理，使项目结构更加清晰。

示例：

{
  "compilerOptions": {
  	"outDir": "./dist" 
  },
}

rootDir
- 指定输入文件的根目录。如果不指定，默认是包含 tsconfig.json 文件的目录。
- 用于控制编译器在查找源文件时的根目录，有助于组织项目结构。

示例：

{
  "compilerOptions": {
  	"outDir": "./dist" 
  },
}

strict：所有严格模式的总开关。开启严格模式，包括严格的类型检查、空值检查等。
- "strictNullChecks"要求在代码中明确处理可能为 null 或 undefined 的值。
- "noImplicitAny" 不允许隐式的 any 类型，强制开发者明确指定变量的类型。
- "strictFunctionTypes"：对函数类型进行更严格的检查。
- "strictBindCallApply"：对 bind、call 和 apply 的使用进行严格检查。
- "strictPropertyInitialization"：要求类的属性在构造函数中或声明时进行初始化。
- 当 strict 设置为 true 时，它会开启上面列举的类型检查和代码规范。TypeScript 编译器会在生成的 JavaScript 文件的开头添加 "use strict"; 语句。
experimentalDecorators
- 是否启用实验性的装饰器支持。
- 默认值是false，不启用。当设置为 true 时，TypeScript 编译器将识别和处理装饰器。
sourceMap
- 生成源映射文件。
- 方便在调试时将编译后的代码映射回原始的 TypeScript 代码。
declaration
- 生成 .d.ts 声明文件，用于在其他项目中使用该模块时提供类型信息。
- 声明文件可以让其他项目在使用你的模块时获得类型提示，提高开发效率。
lib
- 指定要包含在编译中的 JavaScript 库（宿主环境）。
- 正常情况下，前端代码在浏览器中运行，是不需要设置lib的。在tsconfig.json中，默认情况下，是被注释的。

示例：

{
  "compilerOptions": {
    "lib": [
      "es2015",
      "dom"
    ]
  }
}

outFile
- 将多个编译后的 JavaScript 文件合并输出到一个单一的文件中。
- 仅支持配置项module是 “amd” 、 “system” 模块。

示例：

{
  "compilerOptions": {
    "outFile": "output.js"
  }
}

在这个例子中，TypeScript 编译器会将所有编译后的 JavaScript 代码合并输出到 output.js 文件中。

allowJs
- 是否允许 TypeScript 编译器编译 JavaScript 文件。
- 默认值是false。
checkJs
- 是否对 JavaScript 文件进行类型检查。
- 默认值是false。
removeComments
- 在编译过程中是否删除 TypeScript 代码中的注释。
- 默认值是false，保留注释。
- 当设置removeComments为true，编译器在编译过程中会删除所有的注释。
noEmit
- TypeScript 编译器是否生成输出文件。
- 默认值为false。
- 当设置 noEmit 为 true 时，TypeScript 编译器只会进行类型检查，而不会生成任何输出文件（如 JavaScript 文件或声明文件）。这对于在不生成实际代码的情况下检查代码的类型正确性非常有用。
noEmitOnError
- 在编译过程中出现错误时是否生成输出文件。
- 默认值是false。
- 当设置为 true 时，如果在编译过程中检测到任何错误，TypeScript 编译器将不会生成输出文件（如 JavaScript 文件或声明文件）。
alwaysStrict
- 是否始终以严格模式编译代码。
- 默认值是false。在默认情况下，不强制以严格模式编译代码。
- 当设置为 true 时，TypeScript 编译器会在生成的 JavaScript 文件的开头添加 "use strict"; 语句，启用严格模式。
noImplicitAny
- 是否禁止隐式的 any 类型。
- 默认值是false。
- 当设置 noImplicitAny 为 true 时，TypeScript 编译器将不允许隐式地将变量类型推断为 any。如果一个变量的类型没有被明确指定，并且无法从上下文推断出具体类型，编译器将报告错误。
noImplicitThis
- 是否禁止隐式的 this 类型。
- 默认值是false。
- 当设置 noImplicitThis 为 true 时，TypeScript 编译器将不允许在函数内部隐式地使用 this。在函数内部添加更多的类型标注来明确 this 的类型。
strictNullChecks
- 对 null 和 undefined 进行更严格的处理。
- 默认值为false。
- 当设置 strictNullChecks 为 true 时，TypeScript 要求开发者明确指定变量是否可以为 null 或 undefined。