TS泛型初学

TS泛型

一、泛型（Generic）

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

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

举个例子：

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

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

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

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

二、泛型函数

2.1 创建泛型函数

function fn<T>(a:T):T{
    return a
}

这里的<T>就是泛型；

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

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

2.2 使用泛型函数

方式一（直接使用）：

fn(10)

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

方式二（指定类型）：

fn<number>(10)

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

2.3 函数中声明多个泛型

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

function fn2<T, K>(a: T, b: K): T{
  return b;
}
fn2<number, string>(10, "hello");

三、泛型类

类中同样可以使用泛型：

class MyClass<T>{
  name: T;
  constructor(name: T){
      this.name = name;
  }
}
const mc = new MyClass<string>('张三')
console.log(mc.name); //张三

四、泛型继承

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

interface Inter{
  length: number;
}

function fn3<T extends Inter>(a: T): number{
  return a.length;
}
console.log(fn3('123'));//3

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

五、目前遇到的TS泛型

 //1.FunctionComponent 
  React.FC  //相当于React.FunctionComponent React是指import进来的react的命名
 //2.interface 
 interface CounterState{
 	count:number
 }