TypeScript 的高效开发离不开完善的工具链支持。本节将聚焦提升开发效率的核心工具，从构建、测试、代码质量、格式化到 IDE 配置，提供完整的「安装-配置-使用」指南，帮助开发者快速搭建专业的 TypeScript 开发环境。

构建工具

构建工具负责将 TypeScript 代码编译为浏览器可执行的 JavaScript，并处理资源打包。现代前端生态中，Vite 和 Webpack 是最常用的选择。

Vite
作为新一代构建工具，Vite 内置 TypeScript 支持，无需额外配置即可实现快速热更新。

• 安装：通过 npm 创建 Vite 项目并选择 TypeScript 模板

  bash

  复制代码

  npm create vite@latest my-ts-project -- --template vanilla-ts
  cd my-ts-project
  npm install

• 配置：创建 vite.config.ts 自定义构建行为，例如设置别名、环境变量等

  typescript

  复制代码

  // vite.config.ts
  import { defineConfig } from 'vite'
  
  export default defineConfig({
    resolve: {
      alias: {
        '@': '/src' // 路径别名配置
      }
    },
    server: {
      port: 3000, // 开发服务器端口
      open: true // 自动打开浏览器
    }
  })

• 使用：启动开发服务器或构建生产版本

  bash

  复制代码

  npm run dev   # 开发环境（实时编译+热更新）
  npm run build # 生产环境构建（输出 dist 目录）

Webpack
传统构建工具需通过 ts-loader 插件支持 TypeScript。

• 安装：安装核心依赖

  bash

  复制代码

  npm install webpack webpack-cli ts-loader typescript --save-dev

• 配置：创建 webpack.config.js 配置文件

  javascript

  复制代码

  // webpack.config.js
  module.exports = {
    entry: './src/index.ts',
    output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader', // 使用 ts-loader 处理 TypeScript 文件
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js'] // 支持 .ts 和 .js 扩展名
    }
  }

• 使用：执行编译命令

  bash

  复制代码

  npx webpack --mode development # 开发模式
  npx webpack --mode production  # 生产模式（代码压缩）

测试工具

测试工具确保 TypeScript 代码的正确性，Jest 和 Vitest 是主流选择，两者均提供 TypeScript 友好的测试体验。

Jest
需通过 ts-jest 预设实现 TypeScript 支持。

• 安装：安装测试依赖

  bash

  复制代码

  npm install jest @types/jest ts-jest typescript --save-dev

• 配置：初始化 Jest 配置并设置 TypeScript 预设

  bash

  复制代码

  npx ts-jest config:init # 自动生成 jest.config.js

  javascript

  复制代码

  // jest.config.js
  module.exports = {
    preset: 'ts-jest', // 使用 ts-jest 预设
    testEnvironment: 'node', // 测试环境（浏览器环境可改为 jsdom）
    testMatch: ['**/*.test.ts'] // 匹配测试文件
  }

• 使用：编写测试文件（如 math.test.ts）并执行测试

  bash

  复制代码

  npx jest # 运行所有测试
  npx jest --watch # 监听文件变化并重新测试

Vitest
作为 Vite 的原生测试工具，Vitest 零配置支持 TypeScript，且与 Vite 共享配置。

• 安装：在 Vite 项目中安装 Vitest

  bash

  复制代码

  npm install vitest --save-dev

• 配置：在 vite.config.ts 中添加测试配置

  typescript

  复制代码

  // vite.config.ts
  import { defineConfig } from 'vite'
  
  export default defineConfig({
    test: {
      globals: true, // 启用全局测试函数（如 describe, it）
      environment: 'jsdom' // 浏览器环境模拟
    }
  })

• 使用：运行测试命令

  bash

  复制代码

  npx vitest # 启动测试
  npx vitest run # 执行一次测试并退出

代码质量

ESLint 通过 TypeScript 插件提供类型感知的代码检查，帮助规避潜在错误。

ESLint 配置

• 安装：安装 ESLint 及 TypeScript 插件

  bash

  复制代码

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

• 配置：创建 .eslintrc.js 定义检查规则

  javascript

  复制代码

  // .eslintrc.js
  module.exports = {
    parser: '@typescript-eslint/parser', // TypeScript 解析器
    plugins: ['@typescript-eslint'], // TypeScript 插件
    extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended' // 推荐规则集
    ],
    rules: {
      // 禁止使用 any 类型（严格类型检查）
      '@typescript-eslint/no-explicit-any': 'error',
      // 强制函数返回值类型注解
      '@typescript-eslint/explicit-function-return-type': 'error',
      // 禁止未使用的变量
      '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_' }]
    }
  }

• 使用：检查指定目录代码

  bash

  复制代码

  npx eslint src # 检查 src 目录
  npx eslint src --fix # 自动修复可修复的错误

格式化

Prettier 负责代码格式化，与 ESLint 集成可实现「代码质量检查+格式化」一体化。

Prettier + ESLint 集成

• 安装：安装格式化依赖

  bash

  复制代码

  npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

• 配置：

  1. 创建 .prettierrc.js 定义格式化规则
  javascript

  复制代码

  // .prettierrc.js
  module.exports = {
    singleQuote: true, // 使用单引号
    semi: true, // 句尾加分号
    tabWidth: 2, // 缩进 2 空格
    trailingComma: 'es5', // 对象/数组尾逗号
    printWidth: 100 // 每行最大字符数
  }

  2. 在 .eslintrc.js 中集成 Prettier
  javascript

  复制代码

  // .eslintrc.js（补充配置）
  module.exports = {
    extends: [
      // ... 其他规则
      'plugin:prettier/recommended' // 优先使用 Prettier 规则
    ]
  }

• 使用：手动格式化或集成到 IDE

  bash

  复制代码

  npx prettier --write src # 格式化 src 目录文件

IDE 配置

VSCode 提供强大的 TypeScript 支持，通过配置可实现「保存自动修复+实时错误提示」。

VSCode 设置

1. 安装必要插件：

   • TypeScript React code snippets：提供 TypeScript 代码片段
   • ESLint：实时代码质量检查
   • Prettier - Code formatter：代码格式化

2. 修改用户设置（settings.json）：

   json

   复制代码

   {
     // 保存时自动格式化并修复 ESLint 错误
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     // 启用 TypeScript 实时错误检查
     "typescript.validate.enable": true,
     // 默认格式化工具为 Prettier
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     // 自动编译 TypeScript 文件
     "typescript.tsdk": "node_modules/typescript/lib"
   }

通过上述工具链的整合，开发者可实现 TypeScript 代码的「高效构建-严格测试-质量保障-自动格式化」全流程支持，显著提升开发效率与代码可靠性。