TypeScript 中 TypeScript 配置文件详解

TypeScript 是一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的一个超集，可以编译成纯 JavaScript 代码。TypeScript 提供了类型检查、面向对象编程、接口、泛型等特性，使得 JavaScript 更加适合大型项目的开发。

在使用 TypeScript 开发项目时，我们需要一个 TypeScript 配置文件来指导编译器的行为。本文将详细介绍 TypeScript 配置文件的各个选项，以及如何正确地配置这些选项。

tsconfig.json 文件

TypeScript 配置文件通常命名为 tsconfig.json，它位于项目根目录下。如果你使用 Visual Studio Code 或者其他一些编辑器，它们会自动为你创建一个默认的 tsconfig.json 文件。如果没有，你可以手动创建一个。下面是一个最简单的 tsconfig.json 文件：

{
  "compilerOptions": {}
}

这个配置文件中只有一个 compilerOptions 选项，它是一个空对象。我们可以在这个对象中添加各种选项来配置 TypeScript 编译器的行为。

compilerOptions 选项

target

target 选项指定编译后的 JavaScript 代码的目标版本。TypeScript 支持多种目标版本，包括 ES3、ES5、ES6/ES2015、ES2016、ES2017、ES2018、ES2019、ES2020 和 ESNext。默认值是 ES3。

{
  "compilerOptions": {
    "target": "es5"
  }
}

module

module 选项指定生成的 JavaScript 代码的模块系统。TypeScript 支持多种模块系统，包括 CommonJS、AMD、SystemJS、ES6/ES2015 和 ESNext。默认值是 CommonJS。

{
  "compilerOptions": {
    "module": "es6"
  }
}

lib

lib 选项指定编译器可以使用的库文件。TypeScript 内置了一些库文件，包括 dom、es5、es6、es2015、es2016、es2017、es2018、es2019、es2020 和 esnext。默认值是 es5。

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

allowJs

allowJs 选项指定是否允许编译器编译 JavaScript 文件。默认值是 false。

{
  "compilerOptions": {
    "allowJs": true
  }
}

checkJs

checkJs 选项指定是否对 JavaScript 文件进行类型检查。默认值是 false。

{
  "compilerOptions": {
    "checkJs": true
  }
}

jsx

jsx 选项指定使用哪种 JSX 语法。TypeScript 支持两种 JSX 语法：preserve 和 react。默认值是 preserve。

{
  "compilerOptions": {
    "jsx": "react"
  }
}

sourceMap

sourceMap 选项指定是否生成源代码映射文件。默认值是 false。

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

outDir 选项指定编译后的 JavaScript 文件输出目录。默认值是当前目录。

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

rootDir

rootDir 选项指定 TypeScript 源代码目录。默认值是当前目录。

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

strict

strict 选项开启 TypeScript 的严格模式。它包括多个子选项，包括 noImplicitAny、noImplicitThis、alwaysStrict、strictNullChecks、strictFunctionTypes、strictPropertyInitialization 和 noImplicitReturns。默认值是 false。

{
  "compilerOptions": {
    "strict": true
  }
}

noImplicitAny

noImplicitAny 选项指定是否禁止使用隐式的 any 类型。默认值是 false。

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

noImplicitThis

noImplicitThis 选项指定是否禁止使用隐式的 this 类型。默认值是 false。

{
  "compilerOptions": {
    "noImplicitThis": true
  }
}

alwaysStrict

alwaysStrict 选项指定是否在生成的 JavaScript 代码中使用 "use strict" 指令。默认值是 false。

{
  "compilerOptions": {
    "alwaysStrict": true
  }
}

strictNullChecks

strictNullChecks 选项指定是否启用严格的 null 检查。默认值是 false。

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

strictFunctionTypes

strictFunctionTypes 选项指定是否启用严格的函数类型检查。默认值是 false。

{
  "compilerOptions": {
    "strictFunctionTypes": true
  }
}

strictPropertyInitialization

strictPropertyInitialization 选项指定是否启用严格的属性初始化检查。默认值是 false。

{
  "compilerOptions": {
    "strictPropertyInitialization": true
  }
}

noImplicitReturns

noImplicitReturns 选项指定是否禁止函数没有返回值的情况。默认值是 false。

{
  "compilerOptions": {
    "noImplicitReturns": true
  }
}

esModuleInterop

esModuleInterop 选项指定是否启用 ES 模块和 CommonJS 模块之间的互操作性。默认值是 false。

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

experimentalDecorators

experimentalDecorators 选项指定是否启用实验性的装饰器特性。默认值是 false。

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

emitDecoratorMetadata

emitDecoratorMetadata 选项指定是否生成装饰器的元数据。默认值是 false。

{
  "compilerOptions": {
    "emitDecoratorMetadata": true
  }
}

moduleResolution

moduleResolution 选项指定模块解析策略。TypeScript 支持两种模块解析策略：node 和 classic。默认值是 node。

{
  "compilerOptions": {
    "moduleResolution": "classic"
  }
}

baseUrl

baseUrl 选项指定模块解析的基础路径。默认值是当前目录。

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

paths

paths 选项指定模块解析的路径映射。它是一个对象，键是模块名，值是模块路径。

-- -------------------- ---- -------
-
  ------------------ -
    ---------- --------
    -------- -
      ------ ----------
      -------- -----------
    -
  -
-

typeRoots

typeRoots 选项指定 TypeScript 类型声明文件的根目录。默认值是当前目录。

{
  "compilerOptions": {
    "typeRoots": ["./typings"]
  }
}

types

types 选项指定要包含的类型声明文件的名称。默认值是空数组。

{
  "compilerOptions": {
    "types": ["node", "lodash"]
  }
}

示例代码

下面是一个完整的 tsconfig.json 文件示例：

-- -------------------- ---- -------
-
  ------------------ -
    --------- ------
    --------- -----------
    ------ ------- -------
    ---------- -----
    ---------- -----
    ------ --------
    ------------ -----
    --------- -------
    ---------- ------
    --------- -----
    ---------------- -----
    ----------------- -----
    --------------- -----
    ------------------- -----
    ---------------------- -----
    ------------------------------- -----
    -------------------- -----
    ------------------ -----
    ------------------------- -----
    ------------------------ -----
    ------------------- -------
    ---------- --------
    -------- -
      ------ ----------
      -------- -----------
    --
    ------------ --------------
    -------- -------- ---------
  -
-

结论

TypeScript 配置文件是一个非常重要的文件，它可以指导编译器的行为，帮助我们更好地开发 TypeScript 项目。本文详细介绍了 TypeScript 配置文件的各个选项，希望能对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675563ed3af3f99efe4b94e6