配置与工具

TypeScript 提供了丰富的配置选项和工具链支持。通过合理配置,可以构建高效的开发环境,提高代码质量和开发效率。

tsconfig.json

tsconfig.json 是 TypeScript 项目的配置文件,定义编译选项、文件包含规则等。

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

tsconfig.json 是 TypeScript 项目的核心配置文件。

编译选项

编译选项控制 TypeScript 编译器的行为。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

常用选项包括目标版本、模块系统、严格模式等。

项目引用

项目引用允许将 TypeScript 项目分割成多个子项目。

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

项目引用支持增量编译,提高大型项目的构建速度。

构建工具集成

TypeScript 可以与主流构建工具集成:

  • Webpack:使用 ts-loaderbabel-loader
  • Vite:原生支持 TypeScript
  • Rollup:使用 @rollup/plugin-typescript
  • esbuild:原生支持 TypeScript

开发工具

TypeScript 开发常用工具:

  • tsc:TypeScript 编译器
  • ts-node:直接运行 TypeScript
  • ts-loader:Webpack TypeScript 加载器
  • ESLint:代码检查工具
  • Prettier:代码格式化工具

代码检查

ESLint 可以检查 TypeScript 代码。

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

配置 ESLint 检查规则。

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

代码格式化

Prettier 可以格式化 TypeScript 代码。

npm install prettier --save-dev

配置 Prettier 格式化规则。

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

实际应用

一个完整的 TypeScript 项目配置。

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

小结

TypeScript 提供了丰富的配置选项和工具链支持。tsconfig.json 是核心配置文件,定义编译选项和文件包含规则。项目引用支持大型项目的增量编译。TypeScript 可以与 Webpack、Vite 等构建工具集成。ESLint 和 Prettier 提供代码检查和格式化功能。合理配置开发环境可以提高代码质量和开发效率。