TypeScript 最佳实践：提升代码质量的 10 个技巧

引言

TypeScript 已经成为现代前端开发的标配。本文将分享 10 个实用的 TypeScript 技巧，帮助你写出更好的代码。

1. 使用 strict 模式

始终在 tsconfig.json 中启用严格模式：

{

"compilerOptions": {

"strict": true

}

}

2. 善用类型推断

不要过度标注类型，让 TypeScript 自动推断：

// ❌ 过度标注

const numbers: number[] = [1, 2, 3]

// ✅ 让 TS 推断

const numbers = [1, 2, 3]

3. 使用 unknown 替代 any

// ❌ 使用 any

function processData(data: any) {

return data.name // 没有类型检查

}

// ✅ 使用 unknown

function processData(data: unknown) {

if (typeof data === 'object' && data !== null && 'name' in data) {

return (data as { name: string }).name

}

}

4. 使用 const 断言

// 类型为 { name: string; age: number }

const user = { name: 'Bruce', age: 30 }

// 类型为 { readonly name: 'Bruce'; readonly age: 30 }

const user = { name: 'Bruce', age: 30 } as const

5. 使用模板字面量类型

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'

type ApiEndpoint = `/api/${string}`

function fetchApi(method: HttpMethod, endpoint: ApiEndpoint) {

// ...

}

fetchApi('GET', '/api/users') // ✅

fetchApi('GET', '/users') // ❌ 类型错误

6. 使用 satisfies 操作符

type Colors = Record<string, [number, number, number]>

const colors = {

red: [255, 0, 0],

green: [0, 255, 0],

} satisfies Colors

// colors.red 的类型是 [number, number, number]，而不是 number[]

7. 使用 Discriminated Unions

type Result<T> =

| { success: true; data: T }

| { success: false; error: string }

function handleResult<T>(result: Result<T>) {

if (result.success) {

console.log(result.data) // TypeScript 知道这里有 data

} else {

console.log(result.error) // TypeScript 知道这里有 error

}

}

8. 使用泛型约束

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {

return obj[key]

}

const user = { name: 'Bruce', age: 30 }

getProperty(user, 'name') // ✅ 返回类型是 string

getProperty(user, 'email') // ❌ 类型错误

9. 使用 Utility Types

interface User {

id: number

name: string

email: string

}

// 所有属性可选

type PartialUser = Partial<User>

// 只读

type ReadonlyUser = Readonly<User>

// 选择部分属性

type UserPreview = Pick<User, 'id' | 'name'>

// 排除部分属性

type UserWithoutEmail = Omit<User, 'email'>

10. 使用 infer 关键字

type ReturnTypeOf<T> = T extends (...args: any[]) => infer R ? R : never

function greet(name: string): string {

return `Hello, ${name}!`

}

type GreetReturn = ReturnTypeOf<typeof greet> // string

总结

掌握这些 TypeScript 技巧可以帮助你写出更安全、更可维护的代码。持续学习和实践是提升 TypeScript 技能的关键。