TypeScript 4.9工具推荐：提升效率的利器

TypeScript 4.9带来了很多新特性，配合合适的工具，可以大幅提升开发效率。

本文推荐TypeScript 4.9时代的常用工具，包括类型检查、代码生成、测试、调试、文档等方面的工具，帮你写出更好的TypeScript代码。

一、TypeScript 4.9新特性

先简单回顾一下TypeScript 4.9的新特性。

1. satisfies操作符

这是4.9最重要的新特性。

satisfies可以检查表达式是否符合某个类型，但不改变表达式的推断类型。

// 之前：用类型注解会丢失字面量类型
const config: Record<string, string | number> = {
  name: 'app',
  port: 3000,
}
config.name // 类型是 string | number，不是 string

// 现在：用satisfies，既检查类型，又保留字面量类型
const config = {
  name: 'app',
  port: 3000,
} satisfies Record<string, string | number>
config.name // 类型是 string
config.port // 类型是 number

satisfies非常实用，推荐大家使用。

2. 自动访问器（Accessors）

class Person {
  accessor name: string
  constructor(name: string) {
    this.name = name
  }
}

accessor会自动生成getter和setter，配合装饰器使用更方便。

3. 类型收窄改进

4.9改进了类型收窄：

• in操作符的类型收窄更准确
• 严格模式下的NaN检查
• Promise的resolve类型改进

4. 其他改进

• 更好的错误提示
• 更快的编译速度
• 更严格的检查

二、类型检查工具

1. tsc（TypeScript编译器）

最基础的工具，就是tsc本身。

# 类型检查
tsc --noEmit

# 编译
tsc

# watch模式
tsc --watch

配置tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

建议开启strict模式，从一开始就写严格的类型。

2. eslint + @typescript-eslint

ESLint配合TypeScript插件，可以做代码检查。

安装：

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

配置.eslintrc：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

ESLint可以发现tsc发现不了的问题，比如未使用的变量、代码风格问题。

3. type-coverage

type-coverage可以检查项目的类型覆盖率。

npx type-coverage

输出：

1234 / 1500 types are covered, 82.3% coverage

可以帮你发现any类型和未覆盖的地方，逐步提升类型覆盖率。

三、代码生成工具

1. ts-node

ts-node可以直接运行TypeScript文件，不需要先编译。

# 安装
npm install ts-node --save-dev

# 运行
ts-node script.ts

# 配合nodemon
nodemon --exec ts-node script.ts

开发时用ts-node非常方便，不用每次都编译。

2. tsx

tsx是一个更快的TypeScript运行工具，基于esbuild。

# 安装
npm install tsx --save-dev

# 运行
tsx script.ts

# watch模式
tsx --watch script.ts

tsx比ts-node更快，启动速度快，适合开发时使用。

3. swc

swc是一个超快的TypeScript/JavaScript编译器，用Rust写的。

# 安装
npm install @swc/core @swc/cli --save-dev

# 编译
swc src --out-dir dist

swc的编译速度比tsc快很多，适合大型项目。但swc只做语法转换，不做类型检查，类型检查还是要用tsc。

4. esbuild

esbuild也是一个超快的打包工具，支持TypeScript。

# 安装
npm install esbuild --save-dev

# 打包
esbuild src/index.ts --bundle --outfile=dist/index.js --platform=node

esbuild速度极快，适合构建工具和开发服务器。

四、测试工具

1. Jest + ts-jest

Jest是最流行的测试框架，配合ts-jest可以测试TypeScript。

# 安装
npm install jest ts-jest @types/jest --save-dev

# 初始化
npx ts-jest config:init

jest.config.js：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/*.test.ts'],
}

写测试：

import { sum } from './math'

test('sum adds two numbers', () => {
  expect(sum(1, 2)).toBe(3)
})

2. Vitest

Vitest是一个新的测试框架，基于Vite，速度快，支持TypeScript。

# 安装
npm install vitest --save-dev

# 运行
vitest

# 单次运行
vitest run

写测试：

import { describe, it, expect } from 'vitest'
import { sum } from './math'

describe('math', () => {
  it('sum adds two numbers', () => {
    expect(sum(1, 2)).toBe(3)
  })
})

Vitest比Jest更快，配置更简单，推荐新项目使用。

3. Mocha + ts-node

如果你喜欢Mocha，也可以配合ts-node使用。

npm install mocha ts-node @types/mocha --save-dev

运行：

mocha --require ts-node/register 'src/**/*.test.ts'

五、调试工具

1. VS Code调试

VS Code内置了TypeScript调试支持。

.vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

可以在TypeScript代码中打断点，直接调试。

2. ndb

ndb是Chrome DevTools的Node.js调试工具。

# 安装
npm install ndb --global

# 调试
ndb node script.js
ndb ts-node script.ts

ndb提供了Chrome DevTools的界面，调试体验更好。

六、文档工具

1. TypeDoc

TypeDoc可以从TypeScript代码生成文档。

# 安装
npm install typedoc --save-dev

# 生成文档
typedoc --out docs src

TypeDoc会解析代码中的注释和类型，生成漂亮的HTML文档。

写注释：

/**
 * 计算两个数的和
 * @param a 第一个数
 * @param b 第二个数
 * @returns 两个数的和
 */
export function sum(a: number, b: number): number {
  return a + b
}

2. api-extractor

api-extractor可以提取API的类型定义，生成API报告。

# 安装
npm install @microsoft/api-extractor --save-dev

# 初始化
api-extractor init

# 运行
api-extractor run

api-extractor可以帮你管理API的变更，确保API的兼容性。

七、类型工具

1. type-fest

type-fest是一个TypeScript类型工具库，提供了很多实用的类型。

npm install type-fest

常用类型：

import { 
  PartialDeep, 
  RequiredDeep, 
  CamelCase, 
  SnakeCase,
  JsonObject,
  LiteralUnion
} from 'type-fest'

// 深度Partial
type Config = PartialDeep<{ a: { b: number } }>

// 驼峰转下划线
type Snake = SnakeCase<'fooBar'> // 'foo_bar'

2. ts-toolbelt

ts-toolbelt是另一个类型工具库，功能更强大。

npm install ts-toolbelt

import { Object, String, List } from 'ts-toolbelt'

// 合并对象
type Merged = Object.Merge<{ a: number }, { b: string }>

// 字符串操作
type Upper = String.Upper<'hello'> // 'HELLO'

3. zod

zod是一个运行时类型校验库，可以和TypeScript类型配合使用。

npm install zod

import { z } from 'zod'

// 定义schema
const UserSchema = z.object({
  name: z.string(),
  age: z.number().int().min(0),
  email: z.string().email(),
})

// 推断类型
type User = z.infer<typeof UserSchema>

// 校验
const user = UserSchema.parse(data)

zod既做运行时校验，又提供TypeScript类型，非常实用。

八、代码质量工具

1. Prettier

Prettier是代码格式化工具，支持TypeScript。

npm install prettier --save-dev

.prettierrc：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

配合ESLint使用：

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

2. Husky + lint-staged

Husky可以管理Git hooks，lint-staged可以只检查暂存的文件。

npm install husky lint-staged --save-dev
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

package.json：

{
  "lint-staged": {
    "*.ts": ["eslint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

提交代码时自动检查和格式化，保证代码质量。

九、我的工具链推荐

根据项目大小，推荐不同的工具组合。

1. 小型项目

• 编译：tsc
• 运行：tsx
• 测试：Vitest
• 检查：ESLint + Prettier
• 简单高效

2. 中型项目

• 编译：swc + tsc（类型检查）
• 运行：tsx
• 测试：Vitest
• 检查：ESLint + Prettier + Husky
• 文档：TypeDoc
• 类型校验：zod

3. 大型项目

• 编译：esbuild/swc + tsc
• 打包：Vite或Rollup
• 测试：Vitest + 覆盖率
• 检查：ESLint + Prettier + Husky + type-coverage
• 文档：TypeDoc + api-extractor
• 类型工具：type-fest + zod
• 监控：Sentry

十、使用建议

1. 不要过度配置

工具是为了提升效率，不是为了增加负担。

• 不要一上来就配置所有工具
• 从小的配置开始，逐步增加
• 只配置你真正需要的
• 定期清理不用的工具

2. 保持更新

TypeScript生态发展很快，工具也在不断更新。

• 定期更新依赖
• 关注新工具和新特性
• 不要用过时的工具
• 比如tsx比ts-node更快，Vitest比Jest更快

3. 团队统一

团队项目，工具要统一。

• 共享配置文件
• 统一代码风格
• 统一检查规则
• 文档说明工具的使用方法

4. 类型是核心

工具只是辅助，核心是写好类型。

• 开启strict模式
• 尽量不用any
• 用satisfies等新特性
• 写好类型注释
• 定期检查类型覆盖率

十一、写在最后

TypeScript 4.9带来了很多新特性，配合合适的工具，可以大幅提升开发效率。

从类型检查到代码生成，从测试到调试，从文档到代码质量，每个环节都有好用的工具。选择适合自己项目的工具，搭建高效的开发流程。

2022年了，TypeScript已经成为前端开发的标配。用好TypeScript，用好工具，能让你的代码更健壮，开发更高效。

最后，用一句话总结："工具是手段，效率是目的。选择合适的工具，写出更好的TypeScript代码。"

愿你用好工具，高效开发。