TypeScript 最佳实践指南

TypeScript 已经成为现代前端开发的标配。本文将分享一些实践中总结的最佳实践，帮助你写出更健壮、更易维护的 TypeScript 代码。

1. 开启严格模式

在 tsconfig.json 中启用严格模式是提升代码质量的第一步：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

2. 善用类型推导

TypeScript 有强大的类型推导能力，不必为所有变量显式声明类型：

// 不推荐 - 类型冗余
const name: string = 'KateHub'
const count: number = 42

// 推荐 - 让 TS 自动推导
const name = 'KateHub'
const count = 42

3. 使用 interface 定义对象类型

interface User {
  id: number
  name: string
  email: string
  avatar?: string  // 可选属性
  readonly createdAt: Date  // 只读属性
}

interface Admin extends User {
  permissions: string[]
}

4. 类型守卫

使用类型守卫来缩小类型范围：

function isString(value: unknown): value is string {
  return typeof value === 'string'
}

function processValue(value: string | number) {
  if (isString(value)) {
    // 此处 value 被推断为 string
    console.log(value.toUpperCase())
  } else {
    // 此处 value 被推断为 number
    console.log(value.toFixed(2))
  }
}

5. 避免使用 any

any 会绕过类型检查，应该尽量避免使用。如果确实需要表示任意类型，考虑使用 unknown：

// 不推荐
function parse(json: string): any {
  return JSON.parse(json)
}

// 推荐
function parse(json: string): unknown {
  return JSON.parse(json)
}

6. 使用工具类型

TypeScript 内置了很多实用的工具类型：

interface User {
  id: number
  name: string
  email: string
}

// Partial - 所有属性变为可选
type PartialUser = Partial<User>

// Pick - 选取部分属性
type UserPreview = Pick<User, 'id' | 'name'>

// Omit - 排除部分属性
type UserWithoutEmail = Omit<User, 'email'>

// Record - 构造对象类型
type UserRoles = Record<string, string[]>

7. 泛型的使用

泛型让代码更具复用性：

// 泛型函数
function identity<T>(arg: T): T {
  return arg
}

// 泛型接口
interface ApiResponse<T> {
  code: number
  message: string
  data: T
}

// 使用
const userResponse: ApiResponse<User> = await fetchUser()

总结

TypeScript 的强大之处在于它的类型系统。合理使用类型可以帮助我们在编译阶段就发现潜在的错误，提升代码的可维护性。希望这些最佳实践对你有所帮助。