TypeScript 高级类型：从入门到劝退到真香

TypeScript 的基础类型很简单，但高级类型是一个全新的世界。这篇文章整理了实际开发中最常用的高级类型技巧。

泛型基础

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

// 泛型约束
function getLength<T extends { length: number }>(arg: T): number {
  return arg.length
}

条件类型

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

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

映射类型

// 将所有属性变为可选
type MyPartial<T> = {
  [P in keyof T]?: T[P]
}

// 将所有属性变为只读
type MyReadonly<T> = {
  readonly [P in keyof T]: T[P]
}

模板字面量类型

type EventName = `on${Capitalize<'click' | 'focus' | 'blur'>}`
// "onClick" | "onFocus" | "onBlur"

实用内置工具类型

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

// Omit: 排除部分属性
type UserWithoutPassword = Omit<User, 'password'>

// Record: 构造键值对类型
type PageViews = Record<string, number>

// ReturnType: 获取函数返回类型
type Result = ReturnType<typeof fetchUser>

infer 关键字

// 提取 Promise 内部类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T

type A = UnwrapPromise<Promise<string>> // string

小结

TypeScript 的类型系统是图灵完备的，理论上可以做任何计算。但在实际开发中，不要为了炫技写过于复杂的类型。好的类型应该是让编辑器帮你发现 bug，而不是让同事读不懂你的代码。