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,而不是让同事读不懂你的代码。