TypeScript tsconfig配置 #

一、tsconfig.json基础 #

1.1 什么是tsconfig.json #

tsconfig.json是TypeScript项目的配置文件，用于指定编译选项和项目文件。

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

1.2 创建配置文件 #

bash

tsc --init

二、compilerOptions #

2.1 目标和环境 #

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020", "DOM"],
    "moduleResolution": "node"
  }
}

选项	说明
target	编译目标版本
module	模块系统
lib	包含的库文件
moduleResolution	模块解析策略

2.2 输出配置 #

json

{
  "compilerOptions": {
    "outDir": "./dist",
    "outFile": "./bundle.js",
    "rootDir": "./src",
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true
  }
}

选项	说明
outDir	输出目录
outFile	合并输出文件
rootDir	源码根目录
sourceMap	生成Source Map
declaration	生成.d.ts文件

2.3 严格模式 #

json

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true
  }
}

2.4 模块解析 #

json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    },
    "rootDirs": ["src", "tests"],
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "types": ["node", "jest"]
  }
}

2.5 互操作性 #

json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  }
}

2.6 其他选项 #

json

{
  "compilerOptions": {
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "checkJs": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

三、include和exclude #

3.1 include #

json

{
  "include": [
    "src/**/*",
    "tests/**/*"
  ]
}

3.2 exclude #

json

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

3.3 files #

json

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

四、项目引用 #

4.1 references #

json

{
  "references": [
    { "path": "./shared" },
    { "path": "./app" }
  ]
}

4.2 composite #

json

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true
  }
}

4.3 项目结构 #

text

project/
├── tsconfig.json
├── shared/
│   ├── tsconfig.json
│   └── src/
└── app/
    ├── tsconfig.json
    └── src/

五、extends继承 #

5.1 基本继承 #

json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

5.2 继承@tsconfig包 #

json

{
  "extends": "@tsconfig/node16/tsconfig.json"
}

六、常用配置模板 #

6.1 Node.js项目 #

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

6.2 React项目 #

json

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["DOM", "DOM.Iterable", "ES2020"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

6.3 库项目 #

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020"],
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "tests"]
}

七、最佳实践 #

7.1 启用严格模式 #

json

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

7.2 使用路径别名 #

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

7.3 项目引用 #

json

{
  "references": [
    { "path": "./shared" }
  ]
}

7.4 继承基础配置 #

json

{
  "extends": "@tsconfig/recommended/tsconfig.json"
}

八、总结 #

本章介绍了TypeScript的tsconfig.json配置：

核心选项 #

target和module
strict严格模式
outDir和rootDir
paths路径别名

最佳实践 #

启用严格模式
使用路径别名
合理组织项目结构
使用项目引用