免费

TypeScript 高级类型编程

TypeScript 的类型系统是其最强大的特性之一。本文将深入讲解 TypeScript 高级类型编程,包括泛型、条件类型、模板字面量类型等核心概念。

泛型(Generics)

泛型允许我们在定义函数、接口或类时不预先指定具体类型,而是在使用时再指定:

function identity<T>(arg: T): T {
  return arg
}

const result = identity<string>('hello')  // 显式指定
const result2 = identity(42)              // 类型推断

泛型约束

interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg
}

条件类型(Conditional Types)

type IsString<T> = T extends string ? true : false

type A = IsString<'hello'>  // true
type B = IsString<123>      // false

实用条件类型工具

type NonNullable = T extends null | undefined ? never : T
type ReturnType = T extends (...args: any[]) => infer R ? R : never
type Parameters = T extends (...args: infer P) => any ? P : never

映射类型(Mapped Types)

type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

type Optional<T> = {
  [P in keyof T]?: T[P]
}

interface User {
  name: string
  age: number
}

type ReadonlyUser = Readonly<User>

模板字面量类型(Template Literal Types)

type EventName<T extends string> = `on${Capitalize<T>}`

type ClickEvent = EventName<'click'>  // 'onClick'
type HoverEvent = EventName<'hover'>  // 'onHover'

工具类型

  • Partial<T> - 所有属性可选
  • Required<T> - 所有属性必填
  • Pick<T, K> - 选择部分属性
  • Omit<T, K> - 排除部分属性
  • Record<K, T> - 创建对象类型
  • Exclude<T, U> - 排除联合类型中的某些类型
  • Extract<T, U> - 提取联合类型中的某些类型

实战示例

实现一个 API 响应的类型:

interface ApiResponse<T> {
  code: number
  message: string
  data: T
}

type ApiSuccess<T> = ApiResponse<T> & { code: 0 }
type ApiError = ApiResponse<null> & { code: number }

type ApiResult<T> = ApiSuccess<T> | ApiError

总结

TypeScript 高级类型是构建大型应用的关键技能。掌握这些类型技巧可以大幅提升代码的可维护性和开发效率。