TypeScript 12 泛型的应用

84 阅读1分钟

1 . 泛型函数 :

  • 声明时 ,在函数名称后面 添加尖括号 <> , 在尖括号里面指定具体的类型
  • 调用时 ,在尖括号里面写入要用的类型
function id<Type>(value : Type) : Type {
     return value
}

const num = id<number>(10) ;
const str = id<string>('a') ;

让函数可以与多种不同的类型一起工作 , 实现了复用的同时保证了类型安全 。

注意 : 调用时如果不写 尖括号 ,TS 能自动推断出类型 ,只不过推断出来的为字面量类型!!!

2 . 泛型接口 :

泛型接口 : 接口搭配泛型来用 ,增加其灵活性及复用性 。 在接口名称后面加上 <类型变量> ,那么这个接口就成了泛型接口 。

0424.png

  • 接口类型变量对接口所有成员可见 ,即接口成员都可以用这个类型变量。
  • 如上图右边 ,使用 泛型接口 时 ,需要明确指出具体类型 ,因为接口没有所谓的类型推断 。

数组实际上就是一个泛型接口

3 . 泛型类 :

在 class 名称后面添加 <类型变量> ,这个类就变成了泛型类

泛型类的创建 :

class People<NumType>{
  value : NumType
  add (x : NumType , y : NumType) : NumType
}

const person = new People<number>()
  • 参数可传可不传 ,看情况 。下图就不用传

0426.png

React的 class 组件的基类Component组件就是泛型类。

0425.png