TypeScript中泛型的使用方法和场景|青训营

72 阅读2分钟

一、泛型函数

泛型最常应用的应该就是泛型函数,泛型函数可以接收传递给它的任何类型,可以为不同类型创建可重用的组件。

function identity(value: T): T { return value; }

console.log(identity(1)); // 1 console.log(identity("1")); // "1" console.log(identity(true)); // true

其中 T 代表 Type,在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外,以下是常见泛型变量代表的意思:

K(Key):表示对象中的键类型; V(Value):表示对象中的值类型; E(Element):表示元素类型。

二、泛型接口

如果我们想要在泛型中返回两种类型的对象,可以使用泛型接口。

interface GenericIdentityFn { (arg: T): T; }

interface ConfigFn{ (value1:string,value2:string):string; }

let setData:ConfigFn=function(v1:string,v2:string):string{ return v1+v2; }

setData('name','张三');

三、泛型类

泛型类可确保在整个类中一致地使用指定的数据类型。

class MinClass{ public list: T[] = [];

add(value: T): void { this.list.push(value); }

min(): T { let minNum = this.list[0]; for (let e of this.list) { if (minNum > e) { minNum = e } } return minNum; } }

// number let m = new MinClass(); //实例化类,并且制定了类的代表类型是number m.add(5); m.min();

// string let m1 = new MinClass(); m1.add('d'); m1.min();

TypeScript 在React 中的属性规定。

type Props = { className?: string ... };

type State = { submitted?: bool ... };

class MyComponent extends React.Component<Props, State> { ... }

五、泛型参数默认类型

在 TypeScript 2.3 以后,我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数,从实际值参数中也无法推断出类型时,这个默认类型就会起作用。 泛型参数默认类型与普通函数默认值类似,对应的语法很简单,即 <T=Default Type>,对应的使用示例如下:

interface A<T=string> { name: T; }

const strA: A = { name: "Semlinker" }; const numB: A = { name: 101 };

泛型参数的默认类型遵循以下规则:

有默认类型的类型参数被认为是可选的。 必选的类型参数不能在可选的类型参数后。 如果类型参数有约束,类型参数的默认类型必须满足这个约束。 当指定类型实参时,你只需要指定必选类型参数的类型实参。 未指定的类型参数会被解析为它们的默认类型。 如果指定了默认类型,且类型推断无法选择一个候选类型,那么将使用默认类型作为推断结果。 一个被现有类或接口合并的类或者接口的声明可以为现有类型参数引入默认类型。 一个被现有类或接口合并的类或者接口的声明可以引入新的类型参数,只要它指定了默认类型。