程序员scholar
  • JS 超集语言 - TypeScript
  • TypeScript
scholar
2023-09-08
目录

TypeScript - 编译和配置

# 1. 编译选项

TypeScript 提供了多种编译选项来帮助开发者管理和控制代码的编译过程。这些选项可以在命令行中直接使用，也可以通过配置文件 tsconfig.json 进行配置。

# 自动编译文件

  • 当你希望 TypeScript 编译器自动监视文件的变化，并在文件修改时自动重新编译时，可以使用 -w 指令。这样，编译器会进入监听模式，自动检测并编译变化的文件。

示例：

tsc xxx.ts -w
1
  • 在这个命令中，tsc 是 TypeScript 编译器的命令，xxx.ts 是要编译的 TypeScript 文件，-w 指令告诉编译器进入监听模式，自动检测文件变化。

# 自动编译整个项目

  • 若要自动编译整个项目中的所有 TypeScript 文件，可以直接使用 tsc 命令而不指定文件名。这会编译项目目录下的所有 .ts 文件。

  • 使用 tsc 命令编译整个项目需要先在项目根目录下创建一个配置文件 tsconfig.json。

  • tsconfig.json 是 TypeScript 编译器的配置文件，用于指定项目的编译选项和编译目标。配置文件中可以定义多个选项，例如编译目标、模块解析策略、源文件路径等。通过 tsconfig.json，开发者可以灵活地配置 TypeScript 项目的编译行为。

  • 一旦 tsconfig.json 配置文件准备好，只需在项目根目录中运行 tsc 命令，即可编译整个项目：

tsc
1

# tsconfig.json 配置文件示例

  • tsconfig.json 配置文件是一个 JSON 格式的文件，用于指定 TypeScript 编译器的选项。

示例：

{
  "compilerOptions": {
    "target": "es5",             // 指定 ECMAScript 目标版本
    "module": "commonjs",        // 指定模块化系统
    "strict": true,              // 启用所有严格类型检查选项
    "esModuleInterop": true,     // 启用对 ES 模块的互操作性
    "skipLibCheck": true,        // 跳过库文件的类型检查
    "forceConsistentCasingInFileNames": true // 在文件名中强制一致的大小写
  },
  "include": ["src"],            // 指定要包含的文件和目录
  "exclude": ["node_modules"]    // 指定要排除的文件和目录
}
1
2
3
4
5
6
7
8
9
10
11
12

  • compilerOptions：指定编译选项，决定代码编译的方式和目标。

    • target：指定编译后的 JavaScript 版本（如 es5、es6）。
    • module：指定模块化系统（如 commonjs、amd、esnext）。
    • strict：启用严格模式下的所有类型检查。
    • esModuleInterop：启用 ES 模块与 CommonJS 模块之间的互操作性。
    • skipLibCheck：跳过对库文件的类型检查，减少编译时间。
    • forceConsistentCasingInFileNames：在文件名中强制使用一致的大小写，避免在不同操作系统上出现问题。

  • include：指定要包含在编译过程中的文件或目录。

  • exclude：指定要排除在编译过程之外的文件或目录。

通过 tsconfig.json 配置文件，开发者可以方便地设置和管理项目的编译选项，以满足不同的开发需求。

# 2. 配置选项

在 tsconfig.json 文件中，TypeScript 提供了多种配置选项，可以用来控制项目的编译行为。以下是一些常见的配置选项及其详细说明。

# include

  • 用途：指定需要被编译的 TypeScript 文件或目录。
  • 默认值：["**/*"]，表示项目中的所有文件都将被编译。
  • 语法：
    • **：表示任意目录。
    • *：表示任意文件。

示例：

"include": [
  "src/**/*",   // 编译 src 目录及其子目录中的所有文件
  "tests/**/*"  // 编译 tests 目录及其子目录中的所有文件
]
1
2
3
4

在上述示例中，src 和 tests 目录下的所有文件都会被编译。

# exclude

  • 用途：指定不需要被编译的文件或目录。
  • 默认值：["node_modules", "bower_components", "jspm_packages"]，这些目录下的文件默认不会被编译。
  • 语法：与 include 语法相同。

示例：

"exclude": [
  "./src/hello/**/*"  // 排除 src 目录下 hello 子目录中的所有文件
]
1
2
3

在上述示例中，src 目录下的 hello 子目录中的文件不会被编译。

# extends

  • 用途：继承另一个配置文件的设置。
  • 用法：通过指定另一个配置文件的路径，可以自动包含该文件中的所有配置信息。

示例：

"extends": "./configs/base"
1

在此示例中，当前配置文件会自动继承 configs 目录下 base.json 中的所有配置。

# files

  • 用途：指定一个包含要编译的文件列表。
  • 注意：通常在需要编译的文件较少时使用该选项。

示例：

"files": [
  "core.ts",
  "sys.ts",
  "types.ts",
  "scanner.ts",
  "parser.ts",
  "utilities.ts",
  "binder.ts",
  "checker.ts",
  "tsc.ts"
]
1
2
3
4
5
6
7
8
9
10
11

在此示例中，files 列表中的文件将会被 TypeScript 编译器编译。

# compilerOptions

  • 用途：定义编译选项，是配置文件中非常重要和复杂的部分。compilerOptions 包含多个子选项，用于配置编译过程。

常见的项目选项：

  • target：设置 TypeScript 代码编译的目标 ECMAScript 版本。

    • 可选值：ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext。

    示例：

    "compilerOptions": {
  "target": "ES6"  // 编译后的 JavaScript 代码使用 ES6 语法
}
    1
    2
    3

  • lib：指定代码运行时所包含的库（宿主环境）。

    • 可选值：ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost 等。

    示例：

    "compilerOptions": {
  "lib": ["ES6", "DOM"]  // 使用 ES6 和 DOM 库
}
    1
    2
    3

  • module：设置编译后代码使用的模块化系统。

    • 可选值：CommonJS、UMD、AMD、System、ES2020、ESNext、None。

    示例：

    "compilerOptions": {
  "module": "CommonJS"  // 使用 CommonJS 模块系统
}
    1
    2
    3

  • outDir：编译后文件的输出目录。

    • 示例：
    "compilerOptions": {
  "outDir": "dist"  // 将编译后的文件输出到 dist 目录
}
    1
    2
    3

  • outFile：将所有文件编译为一个 JavaScript 文件。

    • 示例：
    "compilerOptions": {
  "outFile": "dist/app.js"  // 将所有文件合并为一个 app.js 文件
}
    1
    2
    3

  • rootDir：指定代码的根目录。

    • 示例：
    "compilerOptions": {
  "rootDir": "./src"  // 设置根目录为 src
}
    1
    2
    3

  • allowJs：是否允许编译 JavaScript 文件。

    • 默认值：false

    示例：

    "compilerOptions": {
  "allowJs": true  // 允许编译 JS 文件
}
    1
    2
    3

  • checkJs：是否对 JavaScript 文件进行语法检查。

    • 默认值：false

    示例：

    "compilerOptions": {
  "checkJs": true  // 检查 JS 文件的语法
}
    1
    2
    3

  • removeComments：是否删除代码中的注释。

    • 默认值：false

    示例：

    "compilerOptions": {
  "removeComments": true  // 删除代码中的注释
}
    1
    2
    3

  • noEmit：是否不生成编译后的文件。

    • 默认值：false

    示例：

    "compilerOptions": {
  "noEmit": true  // 不生成编译后的文件
}
    1
    2
    3

  • sourceMap：是否生成 source map 文件。

    • 默认值：false

    示例：

    "compilerOptions": {
  "sourceMap": true  // 生成 source map 文件
}
    1
    2
    3

# 严格检查选项

  • strict：启用所有的严格检查。

    • 默认值：true，启用后相当于开启所有的严格检查。

  • alwaysStrict：始终以严格模式编译代码。

    • 示例：
    "compilerOptions": {
  "alwaysStrict": true  // 启用严格模式
}
    1
    2
    3

  • noImplicitAny：禁止隐式的 any 类型。

    • 示例：
    "compilerOptions": {
  "noImplicitAny": true  // 禁止隐式 any 类型
}
    1
    2
    3

  • noImplicitThis：禁止不明确类型的 this。

    • 示例：
    "compilerOptions": {
  "noImplicitThis": true  // 禁止不明确类型的 this
}
    1
    2
    3

  • strictNullChecks：严格的空值检查。

    • 示例：
    "compilerOptions": {
  "strictNullChecks": true  // 启用严格的空值检查
}
    1
    2
    3

# 额外检查选项

  • noFallthroughCasesInSwitch：检查 switch 语句中是否包含正确的 break。

    • 示例：
    "compilerOptions": {
  "noFallthroughCasesInSwitch": true  // 检查 switch 语句中的 break
}
    1
    2
    3

  • noImplicitReturns：检查函数是否存在隐式返回值。

    • 示例：
    "compilerOptions": {
  "noImplicitReturns": true  // 检查函数的返回值
}
    1
    2
    3

  • noUnusedLocals：检查未使用的局部变量。

    • 示例：
    "compilerOptions": {
  "noUnusedLocals": true  // 检查未使用的局部变量
}
    1
    2
    3

  • noUnusedParameters：检查未使用的参数。

    • 示例：
    "compilerOptions": {
  "noUnusedParameters": true  // 检查未使用的参数
}
    1
    2
    3

# 高级选项

  • allowUnreachableCode：是否允许不可达代码。

    • 可选值：
      • true：忽略不可达代码。
      • false：不可达代码将引发错误。

  • noEmitOnError：有错误时不进行编译。

    • 默认值：false

    示例：

    "compilerOptions": {
  "noEmitOnError": true  // 有错误时不编译
}
    1
    2
    3
    4

这些配置选项为 TypeScript 提供了丰富的编译控制能力，使开发者可以根据项目的需求灵活配置编译行为，以达到最佳的开发效果。

编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
TypeScript - 基本类型
TypeScript - 文件打包

← TypeScript - 文件打包→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar