Typescript tsconfig.json 配置详解

YTVJK • 2025-02-01 13:34 • 编程

一、tsconfig.json概述

tsconfig.json是 TypeScript 的配置文件，它包含了 TypeScript 编译器的一系列选项来控制编译过程中的行为。通过对 tsconfig.json 进行配置，我们可以让 TypeScript 直接编译整个项目，而不需要手动去指定每个 ts 文件。

tsconfig.json 文件格式为 JSON，它是一个包含了编译选项的对象。在本文中，我们将介绍和解释最常用的一些选项。

二、tsconfig.json基本配置选项

1. files 和 include

files 和 include 选项告诉编译器在编译时需要包含哪些文件，它们都是一个相对于 tsconfig.json 文件的文件列表。

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

在上面的示例中，我们让编译器只编译 src/app.ts 文件。然而，我们同样希望编译所有其他的 TypeScript 文件，所以我们添加了 include 选项，让编译器递归地查找 src 目录下的所有 TypeScript 文件。

2. exclude 和 files.exclude

exclude 和 files.exclude 是排除文件或者文件夹的选项。它们都是一个相对于 tsconfig.json 文件的文件列表。

{
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "files": [
    "src/app.ts"
  ],
  "files.exclude": [
    "src/image.png"
  ]
}

在上面的示例中，我们告诉编译器不要包含 node_modules 文件夹和任何以 .spec.ts 结尾的测试文件。此外，我们还使用了 files.exclude 选项来排除一个非 TypeScript 文件。

3. compilerOptions 配置

compilerOptions 配置涵盖了迄今为止最常见和最重要的 TypeScript 编译器选项。

3.1 target

target 选项告诉编译器你想将 TypeScript 编译成哪个版本的 ECMAScript。默认情况下，TypeScript 会将代码编译为最新的 ECMAScript 版本（目前是 ESNext），但你可以将 target 选项设置为 ES5、ES6 或者 ES7 等其他版本。

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

在上面的示例中，我们将编译目标设置为 ES5。

3.2 module

module 选项告诉编译器你想如何组织生成的 JavaScript 代码。

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

在上面的示例中，我们将模块组织方式设置为 CommonJS。你还可以使用其他的模块组织方式，例如：AMD、UMD 和 ES6 等。

3.3 lib

lib 选项告诉编译器你需要使用哪些类型库。

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

在上面的示例中，我们告诉 TypeScript 编译器我们需要使用 ES6 和 DOM 类型库。

3.4 sourceMap

sourceMap 选项告诉编译器是否生成源映射文件。

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

在上面的示例中，我们告诉编译器生成源映射文件。

3.5 outDir 和 rootDir

outDir 选项告诉编译器将 TypeScript 文件编译后生成的 JavaScript 文件输出到哪个目录。

{
  "compilerOptions": {
    "outDir": "build"
  }
}

在上面的示例中，我们告诉编译器将生成的 JavaScript 文件输出到 build 目录。

rootDir 选项告诉编译器你的源 TypeScript 文件放在哪个目录。

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

在上面的示例中，我们告诉编译器 TypeScript 文件放在 src 目录。

3.6 strict

strict 选项是一个组合选项，它启用了 TypeScript 的所有严格类型检查选项。

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

在上面的示例中，我们启用了 TypeScript 的所有严格类型检查选项。

四、总结

tsconfig.json 文件是 TypeScript 编译器的配置文件。本文介绍了一些常用的选项。

原创文章，作者：YTVJK，如若转载，请注明出处：https://www.506064.com/n/333442.html