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来表示该类型;

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

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
 }
 

你可能感兴趣的:(ts,react.js,开发语言)