系统讲解 TypeScript 高级类型机制,包括泛型、条件类型、映射类型与 infer,在真实项目中的工程化应用。
在中小型项目中,基础类型已经足够使用,但在企业级应用中,你会遇到大量复杂数据结构,例如:
这时候,如果只使用基础类型,会导致大量 any 和类型重复。
泛型是 TypeScript 类型系统的核心能力之一。
function identity<T>(value: T): T { return value }
它解决的问题是:类型复用。
interface ApiResponse<T> { code: number message: string data: T }
使用:
type User = { name: string } const res: ApiResponse<User> = { code: 200, message: "ok", data: { name: "Tom" } }
条件类型可以根据输入类型动态决定输出类型。
type IsString<T> = T extends string ? true : false
示例:
type A = IsString<string> // true type B = IsString<number> // false
infer 用于在条件类型中推导类型。
type ElementType<T> = T extends (infer U)[] ? U : never
使用:
type A = ElementType<string[]> // string
映射类型用于批量转换属性类型。
type ReadOnly<T> = { readonly [K in keyof T]: T[K] }
示例:
type User = { name: string age: number } type ReadonlyUser = ReadOnly<User>
这些是 TypeScript 内置工具类型。
type UserBasic = Pick<User, "name">
type UserWithoutAge = Omit<User, "age">
type PartialUser = Partial<User>
interface ApiResult<T> { code: number message: string data: T } async function request<T>(url: string): Promise<ApiResult<T>> { const res = await fetch(url) return res.json() }
使用:
const user = await request<User>("/api/user")
类型体操不是炫技,而是解决复杂类型复用问题。
例如:
const data: any = {}
❌ 会破坏类型安全
type A<T, U, K, V> = ...
❌ 可读性下降
TypeScript 的核心价值不只是“类型检查”,而是构建可维护的工程体系。
掌握高级类型后,你可以让代码具备:
暂无评论,留下第一条声音吧。