什么是泛型,如何使用它?
泛型(Generics)是什么?
泛型是TypeScript中一种创建可复用、类型安全组件的工具,它允许你在定义函数、接口或类时不预先指定具体类型,而是在使用时再指定类型参数。这解决了代码复用与类型安全之间的矛盾。
为什么需要泛型?
没有泛型时,通常有两种方式处理不同类型:
- 使用
any
类型(失去类型检查) - 为每种类型重复编写几乎相同的代码
泛型通过参数化类型解决了这个问题,使组件可以支持多种类型同时保持类型安全。
基本使用方法
1. 泛型函数
// 定义泛型函数,T是类型参数(可自定义名称)
function identity<T>(arg: T): T {return arg;
}// 使用时指定类型
const num: number = identity<number>(10);
const str: string = identity<string>('hello');// 类型推断(可省略显式类型)
const bool = identity(true); // 自动推断T为boolean
2. 泛型接口
// 定义泛型接口
interface Container<T> {value: T;getValue: () => T;
}// 实现时指定类型
const numberContainer: Container<number> = {value: 100,getValue: () => 100
};const stringContainer: Container<string> = {value: '泛型',getValue: () => '泛型'
};
3. 泛型类
class Stack<T> {private items: T[] = [];push(item: T): void {this.items.push(item);}pop(): T | undefined {return this.items.pop();}
}// 使用时指定类型
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push('2'); // 错误:不能将string分配给numberconst stringStack = new Stack<string>();
stringStack.push('hello');
高级特性
1. 泛型约束
限制泛型只能是特定类型或具有特定属性:
// 约束T必须有length属性
interface Lengthwise {length: number;
}function logLength<T extends Lengthwise>(arg: T): T {console.log(arg.length);return arg;
}logLength('hello'); // 正确:string有length
logLength(10); // 错误:number没有length
2. 默认类型参数
为泛型指定默认类型:
function createArray<T = string>(length: number, value: T): T[] {return Array(length).fill(value);
}const strArray = createArray(3, 'x'); // string[]
const numArray = createArray<number>(3, 10); // number[]
3. 多类型参数
function pair<T, U>(first: T, second: U): [T, U] {return [first, second];
}const result = pair('age', 25); // [string, number]
典型应用场景
- 通用数据结构:如数组、栈、队列等
- 工具函数:如数组排序、过滤等不依赖具体类型的操作
- API响应处理:统一处理不同类型的接口返回数据
- 组件封装:React/Vue等框架中的可复用组件
泛型命名约定
T
:Type(表示类型)K
:Key(表示对象的键类型)V
:Value(表示对象的值类型)E
:Element(表示元素类型)
这些只是约定,实际可以使用任何有效名称。