TypeScript(六)泛型

523 阅读2分钟

泛型

类型不明确,但是要求其中一部分或者全部类型是一致的情况。

在前文我们已经看到类型实际上可以进行一定的运算,要想写出的类型使用范围更广,不妨让它像函数 一样可以接受参数。TS的泛型便是起到这样的作用,你可以把它当做类型的参数。它和函数参数一样, 可以有默认值。除此之外,还可以用extends对参数本身需要满足的条件进行限制。

在定义一个函数、type、interface、class时,在名称后面加上<>表示接受类型参数。而在实际调用时, 不一定需要手动传入类型参数TS往往能自行推断出来。在TS推断不准时,再手动传入参数来纠正。

// 定义
class React.Component<P = {}, S = {}, SS = any> { ... }
interface IShowConfig<P extends IShowProps> { ... }
// 调用
class Modal extends React.Component<IModalPropsIModalState> { ... }

定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定);

此时泛型便能够发挥作用;

举个例子:

function test(arg: any): any{
  return arg;
}

上例中,test函数有一个参数类型不确定,但是能确定的时其返回值的类型和参数的类型是相同的;

由于类型不确定所以参数和返回值均使用了any,但是很明显这样做是不合适的:

首先使用any会关闭TS的类型检查,其次这样设置也不能体现出参数和返回值是相同的类型;

泛型函数

创建泛型函数

function test<T>(arg: T): T{
   return arg;
}

这里的<T>就是泛型;

T是我们给这个类型起的名字(不一定非叫T),设置泛型后即可在函数中使用T来表示该类型;

所以泛型其实很好理解,就表示某个类型;

那么如何使用上边的函数呢?

使用泛型函数

方式一(直接使用):

test(10)

使用时可以直接传递参数使用,类型会由TS自动推断出来,但有时编译器无法自动推断时还需要使用下面的方式

方式二(指定类型):

test<number>(10)

也可以在函数后手动指定泛型;

函数中声明多个泛型

可以同时指定多个泛型,泛型间使用逗号隔开:

function test<T, K>(a: T, b: K): K{
 return b;
}
​
test<numberstring>(10"hello");

使用泛型时,完全可以将泛型当成是一个普通的类去使用;

泛型类

类中同样可以使用泛型:

class MyClass<T>{
 prop: T;
​
 constructor(prop: T){
     this.prop = prop;
}
}

泛型继承

除此之外,也可以对泛型的范围进行约束

interface MyInter{
 lengthnumber;
}
​
function test<T extends MyInter>(arg: T): number{
 return arg.length;
}

使用T extends MyInter表示泛型T必须是MyInter的子类,不一定非要使用接口类和抽象类同样适用;