tsconfig.json 配置详解—— TypeScript 编译器超级武器-JavaScript中文网-JavaScript教程资源分享门户

在前端开发领域，TypeScript 已经成为了一种必备的技能，它可以让我们更容易地编写出稳定、可维护的代码。而 tsconfig.json 文件则是 TypeScript 编译器的超级武器，通过配置 tsconfig.json 文件，我们可以灵活地控制和定制 TypeScript 的编译过程。本文将详细介绍 tsconfig.json 文件的配置及其意义，并带有示例代码。

1. tsconfig.json 文件的作用

tsconfig.json 文件是 TypeScript 编译器的配置文件，用于保存 TypeScript 编译器的配置信息。通过配置 tsconfig.json 文件，我们可以灵活地控制 TypeScript 编译器的行为，例如编译器所要编译的文件、编译目标版本、是否启用严格模式等。

2. tsconfig.json 文件的基本结构

tsconfig.json 文件的基本结构如下：

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

其中，compilerOptions 是 TypeScript 编译器的配置项，包含了很多可选配置；include 指定了要被编译的文件路径，等同于命令行参数 --include；exclude 指定了被排除在编译范围之外的文件，等同于命令行参数 --exclude；extends 指定了要继承的配置文件；files 指定一个文件列表，会编译这些文件中的 TypeScript 代码。

3. compilerOptions 配置项详解

3.1. target

target 配置项用于指定 TypeScript 编译后的 JavaScript 目标版本，默认为 ES3。常见的取值有 ES5、ES6、ES2015、ES2016、ESNext 等。

{
  "compilerOptions": {
    "target": "ES5"
  }
}

3.2. module

module 配置项用于指定模块加载器的类型，默认值为 CommonJS，常用的取值有 CommonJS、ES2015、AMD、System、None 等。

{
  "compilerOptions": {
    "module": "CommonJS"
  }
}

3.3. lib

lib 配置项用于指定 TypeScript 编译时可以使用的类型定义文件。可选值为 dom、es5、es6、es7、es2015.promise、es2015.generator 等。如果启用了 Strict Null Checking（详见 9.2 部分），则必须包含 lib 中的 "dom"。

{
  "compilerOptions": {
    "lib": ["es5", "es6", "es2015.promise", "es2015.generator"]
  }
}

3.4. declaration

declaration 配置项用于指定编译后是否生成 .d.ts 类型定义文件，默认值为 false。如果要发布一个库供其他人使用，建议开启此选项。

{
  "compilerOptions": {
    "declaration": true
  }
}

3.5. outDir

outDir 配置项用于指定编译后 .js 文件的输出目录。默认值为当前目录。

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

3.6. sourceMap

sourceMap 配置项用于指定是否生成调试用的 source map 文件，默认值为 false。开启此选项可以方便调试源代码。

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

3.7. strict

strict 配置项将启用所有六个严格模式选项（即 noImplicitAny、noImplicitThis、alwaysStrict、strictNullChecks、strictFunctionTypes、strictPropertyInitialization）。

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

3.8. noImplicitAny

noImplicitAny 配置项用于指定是否禁止隐式的 any 类型，默认值为 false。开启此选项可以提高类型检查的准确性。

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

3.9. noImplicitThis

noImplicitThis 配置项用于指定是否禁止隐式的 this 类型，默认值为 false。开启此选项可以提高类型检查的准确性。

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

3.10. alwaysStrict

alwaysStrict 配置项用于指定编译后是否始终开启严格模式，默认值为 false。开启此选项可以提高代码的安全性和可读性。

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

3.11. strictNullChecks

strictNullChecks 配置项用于指定是否启用 null 和 undefined 类型的检查，默认值为 false。开启此选项可以消除许多运行时异常。

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

3.12. strictFunctionTypes

strictFunctionTypes 配置项用于指定是否启用函数参数的双向协变性检查，默认值为 false。开启此选项可以提高对函数类型的检查准确性。

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

3.13. strictPropertyInitialization

strictPropertyInitialization 配置项用于指定是否需要对类属性进行初始化，默认值为 false。开启此选项可以防止实例化时忘记初始化某些属性。

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

4. include 和 exclude 配置项详解

4.1. include

include 配置项用于指定要被编译的文件路径，可以是一个包含匹配模式的数组。

{
  "include": [
    "src/**/*.ts",
    "test/**/*.ts"
  ]
}

4.2. exclude

exclude 配置项用于指定被排除在编译范围之外的文件，可以是一个包含匹配模式的数组。

{
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.test.ts"
  ]
}

5. extends 配置项详解

extends 配置项用于指定要继承的配置文件，可以是相对于当前 tsconfig.json 文件的路径或包含该文件名的 npm 安装包的名称。

{
  "extends": "@scope/package-name/tsconfig.base.json"
}

6. files 配置项详解

files 配置项用于指定一个文件列表，会编译这些文件中的 TypeScript 代码。

{
  "files": [
    "src/index.ts",
    "src/types.ts"
  ]
}

7. 基础示例

下面是一个基础的 tsconfig.json 文件示例：

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

8. 高级示例

下面是一个高级的 tsconfig.json 文件示例，供大家参考：

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

9. 总结

本文对 tsconfig.json 文件进行了详细的介绍，包括了 TypeScript 编译器的配置项、 include 和 exclude 配置项、extends 配置项、files 配置项等。我们相信，经过本文的学习，大家已经可以轻松上手配置一个合理、准确的 tsconfig.json 文件了。

参考文献

TypeScript Handbook

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