·技术

TypeScript 高级类型技巧

# TypeScript# 类型系统# 前端

引言

TypeScript 的类型系统非常强大,掌握高级类型技巧能显著提升代码质量和开发效率。

条件类型

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

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

映射类型

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

type Partial<T> = {
  [K in keyof T]?: T[K]
}

模板字面量类型

type EventName = `on${Capitalize<string>}`
// 'onClick' | 'onChange' | 'onSubmit' ...

infer 关键字

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

type Fn = (x: number) => string
type R = ReturnType<Fn> // string

实用工具类型实现

// 深度 Partial
type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]
}

总结

掌握这些高级类型技巧,能够写出更安全、更优雅的 TypeScript 代码。