当前位置：首页 > news >正文

TypeScript 泛型

news 2026/7/7 7:23:32

TypeScript 泛型（Generics）详解

泛型（Generics）是 TypeScript 最强大、最核心的特性之一。它允许你创建可重用、类型安全的组件，在不牺牲类型检查的前提下，让函数、类、接口等能够处理多种类型，而不是固定为某种特定类型。

泛型的核心思想：“类型变量”—— 用占位符（如<T>）表示类型，在使用时再指定具体类型。

1. 泛型函数（Generic Functions）

基础示例：身份函数（Identity Function）

// 普通函数（无泛型）functionidentity(arg:number):number{returnarg;}// 使用 any（失去类型安全）functionidentityAny(arg:any):any{returnarg;}// let output: string = identityAny(123); // 不会报错，但不安全// 泛型版本（推荐）functionidentity<T>(arg:T):T{returnarg;}// 使用时指定类型letnumOutput:number=identity<number>(123);letstrOutput:string=identity<string>("hello");// 或依靠类型推断（最常用）letboolOutput=identity(true);// 类型自动推断为 boolean

多个泛型参数

functionmerge<T,U>(obj1:T,obj2:U):T&U{return{...obj1,...obj2};}letmerged=merge({name:"Alice"},{age:30});// merged 类型：{ name: string; } & { age: number; } → { name: string; age: number; }

2. 泛型接口（Generic Interfaces）

interfaceGenericArray<T>{items:T[];add(item:T):void;get(index:number):T;}// 使用letnumberArray:GenericArray<number>={items:[1,2,3],add(item){this.items.push(item);},get(index){returnthis.items[index];}};letstringArray:GenericArray<string>={items:["a","b"],add(item){this.items.push(item);},get(index){returnthis.items[index];}};

3. 泛型类（Generic Classes）

classBox<T>{privatecontent:T;constructor(initial:T){this.content=initial;}set(value:T):void{this.content=value;}get():T{returnthis.content;}}// 使用letnumberBox=newBox<number>(100);numberBox.set(200);console.log(numberBox.get());// 200letstringBox=newBox<string>("hello");stringBox.set("world");// stringBox.set(123); // 错误：类型不匹配

4. 泛型约束（Constraints）—— 限制 T 的范围

默认情况下，T可以是任何类型，有时需要限制它具有某些属性。

// 约束 T 必须有 length 属性functionprintLength<Textends{length:number}>(arg:T):void{console.log(arg.length);}printLength("hello");// OKprintLength([1,2,3]);// OKprintLength({length:10,value:5});// OK// printLength(123); // 错误：number 没有 length

使用 keyof 约束键

functiongetProperty<T,KextendskeyofT>(obj:T,key:K):T[K]{returnobj[key];}letperson={name:"Alice",age:30};letname=getProperty(person,"name");// 类型：stringletage=getProperty(person,"age");// 类型：number// getProperty(person, "email"); // 错误：email 不存在

5. 默认泛型参数（Default Type Parameters，TS 2.3+）

interfaceApiResponse<T=any>{data:T;status:number;}// 使用时可省略letresponse:ApiResponse={data:"ok",status:200};// 或指定letjsonResponse:ApiResponse<string[]>={data:["a","b"],status:200};

6. 常见泛型应用场景

场景	示例
数组工具函数	`function first<T>(arr: T[]): T`
Promise	`Promise<T>`（TS 内置）
React 组件	`function List<T>(props: { items: T[] })`
类型安全的工厂函数	`function create<T>(c: new () => T): T`
映射类型	`type Partial<T> = { [K in keyof T]?: T[K] }`

7. 内置泛型工具类型（Utility Types）

TypeScript 自带大量基于泛型的工具类型：

类型	作用	示例
`Partial<T>`	所有属性可选	`Partial<User>`
`Required<T>`	所有属性必选
`Readonly<T>`	所有属性只读
`Pick<T, K>`	挑选属性	`Pick<User, “name”
`Omit<T, K>`	排除属性	`Omit<User, "password">`
`Record<K, T>`	创建键值对象类型	`Record<string, number>`
`ReturnType<T>`	获取函数返回值类型	`ReturnType<typeof fetch>`
`Parameters<T>`	获取函数参数元组

8. 最佳实践建议

建议	说明
优先让 TS 自动推断泛型	如`identity("hi")`而非`identity<string>("hi")`
使用约束避免过度宽松	`T extends { id: number }`等
泛型函数名后写`<T>`	保持一致性
避免泛型嵌套过深	可读性优先
结合接口/类使用泛型	构建可复用组件
多用内置工具类型	减少手动编写复杂类型

小结：泛型速查表

写法	含义
`function fn<T>(arg: T): T`	基本泛型函数
`T extends U`	约束 T 必须继承 U
`K extends keyof T`	键约束
`class Box<T>`	泛型类
`interface List<T>`	泛型接口
`Promise<T>`	内置泛型示例
`Partial<T>`	工具类型示例