TypeScript - tsconfig.json 文件

---

---

TypeScript 的 `tsconfig.json` 文件是一个配置文件，用于指定编译器选项。这些编译器选项用于编译 TypeScript 代码并将其转换为 JavaScript 代码。但是，它也允许开发人员使用 JSON 格式指定项目中使用的更多配置。

`tsconfig.json` 文件始终位于项目的根目录中。此文件包含 JSON 格式的数据。

tsconfig.json 文件的基本结构

`tsconfig.json` 文件主要包含以下 5 个属性，所有属性都是可选的

• compileOnSave
• compilerOptions
• files
• include
• exclude

如果您在 `tsconfig.json` 文件中不使用任何这些属性，则编译器将使用默认设置。

以下是 `tsconfig.json` 文件的基本结构。

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs"
    },
    "files": [
        "app.ts",
        "base.ts"
    ],
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "src/**/*.calc.ts"
    ]
}

在上述文件中，您可以根据需要添加更多编译器选项或其他属性列表中的元素。

让我们逐一了解每个属性。

compileOnSave 属性

`compileOnSave` 属性用于指定是否要在保存代码时立即编译项目代码。`compileOnSave` 属性的默认值为 `false`。

如果为此属性使用 `false` 值，则需要手动编译代码。

以下是如何在 `tsconfig.json` 文件中使用 `compileOnSave` 属性。

{
    "compileOnSave": boolean_value
}

compilerOptions 属性

`compilerOptions` 是 `tsconfig.json` 文件中广泛使用的属性。它用于指定 TypeScript 编译器编译代码的设置。例如，如果您想在编译 TypeScript 代码时使用特定版本的 JavaScript 或模块，您可以修改 `compilerOptions` 属性。

以下是一些在 `tsconfig.json` 文件中使用的常用编译器选项。

以下是在 `tsconfig.json` 文件中使用 `compilerOptions` 的常用方法。

{    
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs"
    }
}

files 属性

`files` 属性将文件列表作为值，以包含在编译过程中。如果文件位于根目录中，您可以直接添加文件名，或者为要包含在编译过程中的每个文件添加相对或绝对文件路径。

在这里，我们展示了如何在 `tsconfig.json` 文件中使用 `files` 属性。

"files": [
    "app.ts",
    "base.ts"
]

include 属性

`include` 属性允许开发人员使用通配符查询添加要编译的 TypeScript 文件列表。

如果要将所有文件添加到编译中，可以使用以下通配符查询。

"include": [
    "src/**/*"
]

上述配置添加了 `src` 目录中的所有文件。

exclude 属性

`exclude` 属性与 `include` 属性相反。它允许开发人员使用通配符查询从编译过程中删除特定文件。

"exclude": [
    "node_modules",
    "src/**/*.calc.ts"
]

上述配置从编译过程中删除了 node 模块和 `calc.ts` 文件。

常见场景和配置

在这里，我们解释了开发人员需要更改 `tsconfig.json` 文件的常见场景。

定位不同的 ECMAScript 版本

如果要在编译 TypeScript 代码时定位不同的 ECMAScript 版本，可以使用以下配置。在这里，我们更改了 `compilerOptions` 对象的 `target` 和 `module` 属性的值。

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015"
  }
}

包含 Node.js 类型定义

当您使用 Node.js 时，您可能需要添加类型定义，以下是如何添加它。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2018",
    "lib": ["es2018", "dom"]
  },
  "include": [
    "src/**/*"
  ]
}

排除测试文件

有时，开发人员需要从编译过程中删除测试文件。以下是如何使用 `exclude` 属性删除特定测试文件或目录。

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

对于 TypeScript 开发人员来说，了解如何管理 `tsconfig.json` 文件始终很重要。您可以编辑此文件以更改编译代码时的模块，添加和删除编译过程中的文件，以及在保存文件后进行自动编译。