2024-04-18 tsconfig.json 常用的配置项作用

TypeScript 编译器的配置文件，用于指定编译 TypeScript 代码时的编译选项和编译目标等信息。

通过修改该文件，可以定制 TypeScript 编译器的行为，例如指定编译目标、启用或禁用特定的语言特性、设置代码检查规则等。以下是一些常用的配置项及其作用：

　　

 

　　compilerOptions：编译器选项。这里包含了众多配置，用于定制 TypeScript 的编译行为。

 

• target：指定 ECMAScript 的目标版本。例如 "ES3"（默认）、"ES5"、"ES2015"、"ES2016"、"ES2017"、"ES2018"、"ES2019"、"ES2020"、"ESNEXT" 等。
• module：指定模块系统类型。如 "commonjs"、"amd"、"system"、"umd"、"es2015"、"esnext" 等。
• strict：启用所有严格类型检查选项。
• jsx：指定 JSX 代码如何被编译。例如 "preserve"、"react"、"react-native" 等。
• outDir：重定向结构到输出目录。
• rootDir：使用来作为输出目录结构根的目录。
• lib：包含要包含在编译中的库列表。
• esModuleInterop：允许默认导入从 CommonJS 模块工作。
• allowJs：允许编译 JavaScript 文件。
• declaration：生成相应的 .d.ts 文件。
• sourceMap：生成 source maps。
• outFile：将多个文件合并成一个文件。
• noImplicitAny：在表达式和声明上有隐含的 any 类型时报错。

• 

• 在tsconfig.json文件里设置 "noImplicitAny": false,就不会报错了

•  

• strictNullChecks：启用严格的 null 检查。
• experimentalDecorators：启用装饰器。
• path：允许你指定编译器在解析模块时使用的路径别名。
  • 它可以简化模块导入的路径，避免使用相对路径或长路径
  • 如你要导入../Cart/Product/ProductDetail.ts文件，可以通过给path设置一个变量@Cart,使用@Cart/ProductDetail.ts就可以缩短导入的路径，从而减少出错。

1. include：用来指定哪些 .ts、.tsx 或 .d.ts 文件需要被编译。如果不指定，则默认当前目录下除了 exclude 之外的所有 .ts、.d.ts、.tsx 文件都会被编译。

2. exclude：指定不需要被编译的目录或文件。

3. files：指定需要编译的文件的列表。只有当需要编译的文件较少时才会用到，通常直接使用 include 指定文件夹。

4. references：用于指定项目之间的引用关系。

5. extends：指定一个其他 tsconfig.json 文件路径，来继承这个配置文件里的配置，继承文件的配置会覆盖当前文件定义的配置。

代码示例：

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
    "sourceMap": true,
    "baseUrl": ".",
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "strict": true,
    "paths": {
      "@Cart/*": ["src/product/*"],
    }
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "tslint:latest",
    "tslint-config-prettier"
  ]
}