·技术
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 代码。