我们在定义函数或者的定义类时,如果遇到返回值类型不明确时就可以使用泛型。
比如在如下例子中,我们传入一个a并返回一个a,但是这个a被我们限定了只能传入number类型。
function fn(a: number): number {
return a;
}
fn(5);
但是我们传入的参数的类型和函数返回值的类型都是不确定的,如果我们想要函数能够返回准确的数据类型,我们该怎么做呢?
一、泛型的定义
function 函数名<泛型名称> (参数 : 泛型名称) : 泛型名称 { // 函数体 }
function fn<T>(a: T): T{
return a;
}
二、泛型的使用
我们可以直接调用具有泛型的函数。
(一)不指定泛型
TS能够自动对传入的数据类型进行推断
比如,在如下代码中,函数传入的是10,所以定义的泛型T是number类型;函数传入的是string,所以定义的泛型T是string类型。
function fn<T>(a: T): T{
return a;
}
console.log(fn(10)); // 打印:10
console.log(fn("Hello")); // 打印:"Hello"
(二)指定泛型
我们在使用一个泛型函数的时候可以手动指定传入传输的类型,可以减少出差错的情况。
函数名<数据类型> (参数)
function fn<T>(a: T): T{
return a;
}
console.log(fn<number>(10)); // 打印:10
console.log(fn<string>("Hello")); // 打印:"Hello"
(三)指定多个泛型
我们也可以在定义泛型函数的时候指定多个泛型:
在如下代码中泛型T为number类型,泛型K为string类型
function fn<T, K>(a: T, b:K): T{
return a;
}
console.log(fn<number, string>(10, "Hello")); // 打印:10 "Hello"
(四)泛型结合接口使用
function 函数名<泛型名称 extends 接口名称> (参数 : 泛型名称) : 数据类型
interface Inter{
length: number;
}
// 泛型T必须使Inter实现类
function fn<T extends Inter>(a: T): number{
return a.length;
}
fn<string>("123");
fn<number>(123); // 报错:类型“number”不满足约束“Inter”
(五)泛型在类中的使用
class 类名<泛型名称> {
属性: 泛型名称;
constructor(属性: 泛型名称) { //... }
}
class Myclass<T> {
name: T;
constructor(name: T) {
this.name = name;
}
}
const c = new Myclass<string>("XunLin");