在TypeScript中,泛型(Generics)是一种允许函数、接口、类等在定义时不指定具体类型,而在使用时指定类型的一种特性。这为创建可重用的组件提供了极大的灵活性,同时保持了类型安全。下面是如何定义和使用泛型的示例,以及一些实际的应用场景。
定义泛型函数
function identity<T>(arg: T): T {
return arg;
}
// 使用示例
let output = identity<string>("hello"); // output 的类型为 string
在这个例子中,<T>
声明了一个类型参数T
。函数identity
接受一个类型为T
的参数,并返回相同类型的值。调用该函数时,可以通过尖括号语法指定具体的类型,如identity<string>
。
泛型接口
interface Dictionary<T> {
[key: string]: T;
}
// 使用示例
const dict: Dictionary<number> = {
age: 25,
score: 88
};
这里定义了一个泛型接口Dictionary
,它是一个对象,其属性值可以是任何类型T
。通过Dictionary<number>
,我们创建了一个只能存储数字值的字典。
泛型类
class GenericClass<T> {
private value: T;
constructor(val: T) {
this.value = val;
}
getValue(): T {
return this.value;
}
}
// 使用示例
const myGeneric = new GenericClass<string>("Hello, TypeScript!");
console.log(myGeneric.getValue()); // 输出: Hello, TypeScript!
这个例子展示了如何定义一个泛型类GenericClass
,它有一个私有成员value
和两个方法:构造函数用于初始化value
,getValue
用于获取它的值。实例化时指定了类型参数为string
。
实际应用场景
-
集合操作:在处理数组或对象集合时,泛型可以帮助确保集合中的元素类型一致,提高代码的安全性。
function map<T, U>(arr: T[], callback: (item: T) => U): U[] { return arr.map(callback); }
-
创建可复用的组件:在React等库中,泛型可以用来创建可以处理多种数据类型的组件,使得组件更加灵活且类型安全。
interface Props<T> { data: T[]; renderItem: (item: T) => JSX.Element; } const ListComponent = <T,>({ data, renderItem }: Props<T>) => ( <ul> {data.map(renderItem)} </ul> );
-
工具函数和库开发:开发库时,泛型使得函数和类能够适应更广泛的需求,而不必为每种可能的类型编写特定版本。
通过这些示例和应用场景,可以看出泛型在TypeScript中是非常强大的特性,它提高了代码的重用性和类型安全性。