【TS】类型工具全解：从基础到实战的类型编程指南

1
// 封装API响应的通用结构
2
type APIResponse<T> = {
3
  code: number // 状态码（200=成功，4xx=客户端错误，5xx=服务端错误）
4
  message: string // 提示信息
5
  data: T // 实际数据（泛型，支持不同类型的响应数据）
6
}
7

8
// 具体API响应类型：用户列表
9
type UserListResponse = APIResponse<User[]>
10
// 具体API响应类型：用户详情
11
type UserDetailResponse = APIResponse<User>
12

13
// 用户类型（复用）
14
type User = {
15
  id: number
16
  name: string
17
  email: string
18
  createdAt: string // 注册时间（ISO字符串）
19
}

1
// 订单状态（可辨识联合类型的基础，后面会详细讲）
2
type OrderStatus = 'pending' | 'paid' | 'shipped' | 'canceled'

1
// 成功响应：status=success，包含数据
2
type SuccessResponse<T> = {
3
  status: 'success'
4
  data: T
5
}
6

7
// 失败响应：status=error，包含错误信息
8
type ErrorResponse = {
9
  status: 'error'
10
  message: string
11
  code?: number // 可选错误码
12
}
13

14
// API响应的联合类型
15
type APIResponse<T> = SuccessResponse<T> | ErrorResponse
16

17
// 使用：处理API响应
18
async function fetchUserList(): Promise<APIResponse<User[]>> {
19
  const res = await fetch('/api/users')
20
  if (!res.ok) {
21
    return { status: 'error', message: '获取用户列表失败' }
22
  }
23
  const data = await res.json()
24
  return { status: 'success', data }
25
}
26

27
// 调用函数并处理响应
28
fetchUserList().then((response) => {
29
  if (response.status === 'success') {
30
    // TypeScript自动收窄为SuccessResponse<User[]>
31
    console.log('用户列表：', response.data)
32
  } else {
33
    // TypeScript自动收窄为ErrorResponse
34
    console.error('错误：', response.message)
35
  }
36
})

1
// 用户基本信息
2
type User = {
3
  id: number
4
  name: string
5
  email: string
6
}
7

8
// 用户权限信息
9
type Permissions = {
10
  role: 'admin' | 'editor' | 'viewer' // 角色（管理员/编辑/查看者）
11
  canEdit: boolean // 是否可编辑
12
  canDelete: boolean // 是否可删除
13
}
14

15
// 合并后的用户类型：同时具备基本信息和权限信息
16
type UserWithPermissions = User & Permissions
17

18
// 使用：获取用户信息（包含权限）
19
async function fetchUserWithPermissions(
20
  id: number
21
): Promise<UserWithPermissions> {
22
  const user = await fetch(`/api/users/${id}`).then((res) => res.json())
23
  const permissions = await fetch(`/api/users/${id}/permissions`).then((res) =>
24
    res.json()
25
  )
26
  return { ...user, ...permissions } // 合并两个对象
27
}

1
// 环境变量配置（键为字符串，值为字符串或数字）
2
type EnvConfig = {
3
  [key: string]: string | number
4
}
5

6
// 加载环境变量（示例）
7
const env: EnvConfig = {
8
  API_URL: process.env.API_URL || 'https://api.example.com',
9
  PORT: Number(process.env.PORT) || 3000,
10
  JWT_SECRET: process.env.JWT_SECRET || 'my-secret-key',
11
}

1
// User类型（复用）
2
type User = {
3
  id: number
4
  name: string
5
  email: string
6
  createdAt: string
7
}
8

9
// 获取User的所有键（字面量联合类型）
10
type UserSortField = keyof User // "id" | "name" | "email" | "createdAt"
11

12
// 下拉选项的类型（value为排序字段，label为显示文本）
13
type SortOption = {
14
  value: UserSortField
15
  label: string
16
}
17

18
// 排序选项列表（类型安全：value必须是User的键）
19
const sortOptions: SortOption[] = [
20
  { value: 'id', label: '按ID排序' },
21
  { value: 'name', label: '按姓名排序' },
22
  { value: 'createdAt', label: '按注册时间排序' },
23
]

1
// API响应类型（复用前面的定义）
2
type APIResponse<T> = {
3
  code: number
4
  message: string
5
  data: T
6
}
7

8
// 用户列表响应类型
9
type UserListResponse = APIResponse<User[]>
10

11
// 获取data字段的类型（User[]）
12
type UserListData = UserListResponse['data'] // User[]
13

14
// 获取data字段中元素的类型（User）
15
type UserListItem = UserListData[number] // User（数组元素的类型）

1
type Clone<T> = {
2
  [K in keyof T]: T[K] // 遍历T的所有键，复制对应的键值类型
3
}
4

5
type ClonedUser = Clone<User> // 和User完全一致

1
// Pick工具类型（TypeScript内置，这里手动实现）
2
type Pick<T, K extends keyof T> = {
3
  [P in K]: T[P] // 遍历K中的每一个键，取T对应的值类型
4
}
5

6
// 选取User中的指定字段（展示用）
7
type UserDisplay = Pick<User, 'name' | 'email' | 'createdAt'>
8
// UserDisplay等价于：{ name: string; email: string; createdAt: string }

1
// Omit工具类型（TypeScript内置，这里手动实现）
2
type Omit<T, K extends keyof T> = {
3
  [P in Exclude<keyof T, K>]: T[P] // 遍历T中不在K里的键
4
}
5

6
// 排除User中的敏感字段（编辑用）
7
type UserEdit = Omit<User, 'id' | 'createdAt'>
8
// UserEdit等价于：{ name: string; email: string }

1
// Readonly工具类型（TypeScript内置，这里手动实现）
2
type Readonly<T> = {
3
  readonly [K in keyof T]: T[K] // 给每个键加readonly修饰符
4
}
5

6
// 只读用户类型（展示用）
7
type ReadonlyUser = Readonly<User>
8

9
// 使用：展示用户信息（不可修改）
10
const user: ReadonlyUser = {
11
  id: 1,
12
  name: 'Alice',
13
  email: 'alice@example.com',
14
  createdAt: '2024-01-01',
15
}
16
user.name = 'Bob' // 报错：readonly属性不可修改

1
// 搜索函数：支持用户名（string）或用户ID（number）
2
function searchUser(input: string | number) {
3
  if (typeof input === 'string') {
4
    // 输入是字符串：按用户名搜索
5
    return fetch(`/api/users?name=${input}`)
6
  } else {
7
    // 输入是数字：按用户ID搜索
8
    return fetch(`/api/users/${input}`)
9
  }
10
}

1
// API响应类型（复用前面的定义）
2
type SuccessResponse<T> = { status: 'success'; data: T }
3
type ErrorResponse = { status: 'error'; message: string }
4
type APIResponse<T> = SuccessResponse<T> | ErrorResponse // 处理API响应的函数
5
function handleAPIResponse<T>(response: APIResponse<T>) {
6
  if ('data' in response) {
7
    // TypeScript自动收窄为SuccessResponse<T>：包含data字段
8
    console.log('请求成功，数据：', response.data)
9
  } else {
10
    // TypeScript自动收窄为ErrorResponse：包含message字段
11
    console.error('请求失败，原因：', response.message)
12
  }
13
} // 使用：处理用户列表响应
14
const userListResponse: APIResponse<User[]> = {
15
  status: 'success',
16
  data: [{ id: 1, name: 'Alice' }],
17
}
18
handleAPIResponse(userListResponse) // 输出：请求成功，数据：[...]// 处理失败响应
19
const errorResponse: APIResponse<User[]> = {
20
  status: 'error',
21
  message: '服务器内部错误',
22
}
23
handleAPIResponse(errorResponse) // 输出：请求失败，原因：服务器内部错误

1
// 抽象支付类
2
abstract class Payment {
3
  abstract pay(amount: number): Promise<void> // 抽象方法：支付
4
} // 支付宝支付类
5
class Alipay extends Payment {
6
  async pay(amount: number) {
7
    console.log(`用支付宝支付了 ${amount} 元`)
8
  }
9
} // 微信支付类
10
class WeChatPay extends Payment {
11
  async pay(amount: number) {
12
    console.log(`用微信支付了 ${amount} 元`)
13
  }
14
} // 处理支付的函数
15
async function processPayment(payment: Payment, amount: number) {
16
  if (payment instanceof Alipay) {
17
    // TypeScript自动收窄为Alipay实例：可以调用Alipay的专有方法（如果有的话）
18
    await payment.pay(amount)
19
  } else if (payment instanceof WeChatPay) {
20
    // TypeScript自动收窄为WeChatPay实例
21
    await payment.pay(amount)
22
  } else {
23
    throw new Error('不支持的支付方式')
24
  }
25
} // 使用：创建支付宝支付实例并处理
26
const alipay = new Alipay()
27
processPayment(alipay, 100) // 输出：用支付宝支付了 100 元// 使用：创建微信支付实例并处理
28
const wechatPay = new WeChatPay()
29
processPayment(wechatPay, 200) // 输出：用微信支付了 200 元

1
// 自定义类型守卫：判断是否为函数
2
function isFunction<T extends (...args: any[]) => any>(
3
  input: unknown
4
): input is T {
5
  return typeof input === 'function'
6
} // 使用：处理回调函数
7
function executeCallback(callback: unknown) {
8
  if (isFunction(callback)) {
9
    // TypeScript自动收窄为函数类型：可以安全调用
10
    callback()
11
  } else {
12
    throw new Error('回调函数必须是一个函数')
13
  }
14
} // 测试：传入函数
15
executeCallback(() => console.log('回调执行了')) // 输出：回调执行了// 测试：传入非函数
16
executeCallback('not a function') // 抛出错误：回调函数必须是一个函数

1
// 自定义类型守卫：判断是否为日期对象
2
function isDate(input: unknown): input is Date {
3
  return input instanceof Date && !isNaN(input.getTime())
4
} // 使用：格式化日期
5
function formatDate(input: string | Date): string {
6
  if (isDate(input)) {
7
    // TypeScript自动收窄为Date类型：可以调用Date的方法
8
    return input.toLocaleDateString()
9
  } else {
10
    // 输入是字符串：尝试解析为日期
11
    const date = new Date(input)
12
    if (isDate(date)) {
13
      return date.toLocaleDateString()
14
    }
15
    throw new Error('无效的日期格式')
16
  }
17
} // 测试：传入日期对象
18
formatDate(new Date('2024-01-01')) // 输出：2024/1/1（根据本地化设置）// 测试：传入日期字符串
19
formatDate('2024-02-14') // 输出：2024/2/14// 测试：传入无效字符串
20
formatDate('invalid date') // 抛出错误：无效的日期格式