TypeScript工程集成

以下是关于 TypeScript 工程集成 的系统梳理，涵盖基础配置、进阶优化、开发规范及实际场景的注意事项，帮助我们构建高效可靠的企业级 TypeScript 项目：

---

一、基础知识点

1. 项目初始化与配置

• tsconfig.json 核心配置：

  {
       
    "compilerOptions": {
       
      "target": "ESNext",          // 编译目标版本
      "module": "ESNext",          // 模块系统
      "outDir": "./dist",          // 输出目录
      "rootDir": "./src",          // 源码目录
      "strict": true,              // 启用严格模式
      "esModuleInterop": true,     // 兼容 CommonJS/ESM
      "skipLibCheck": true         // 跳过库类型检查（提升速度）
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }
  

• 常用 CLI 命令：

  tsc --init              # 生成 tsconfig.json
  tsc --watch             # 监听模式编译
  tsc --noEmit --project . # 只做类型检查
  

2. 模块化与路径解析

• 路径别名配置：

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

  // Webpack 配合
  resolve: {
       
    alias: {
        '@': path.resolve(__dirname, 'src