TS中泛型的使用

我们在定义函数或者的定义类时，如果遇到返回值类型不明确时就可以使用泛型。

比如在如下例子中，我们传入一个a并返回一个a，但是这个a被我们限定了只能传入number类型。

function fn(a: number): number {
  return a;
}
fn(5);

但是我们传入的参数的类型和函数返回值的类型都是不确定的，如果我们想要函数能够返回准确的数据类型，我们该怎么做呢？

一、泛型的定义

function 函数名<泛型名称> (参数 : 泛型名称) : 泛型名称 {  // 函数体   }

function fn(a: T): T{
  return a;
}

二、泛型的使用

我们可以直接调用具有泛型的函数。

（一）不指定泛型

TS能够自动对传入的数据类型进行推断

比如，在如下代码中，函数传入的是10，所以定义的泛型T是number类型；函数传入的是string，所以定义的泛型T是string类型。

function fn(a: T): T{
  return a;
}
 
console.log(fn(10));  // 打印：10
console.log(fn("Hello"));  // 打印："Hello"

（二）指定泛型

我们在使用一个泛型函数的时候可以手动指定传入传输的类型，可以减少出差错的情况。

函数名<数据类型> (参数)

function fn(a: T): T{
  return a;
}
 
console.log(fn<number>(10));  // 打印：10
console.log(fn<string>("Hello"));  // 打印："Hello"

 （三）指定多个泛型

我们也可以在定义泛型函数的时候指定多个泛型：

在如下代码中泛型T为number类型，泛型K为string类型

function fn(a: T, b:K): T{
  return a;
}
 
console.log(fn<number, string>(10, "Hello"));  // 打印：10 "Hello"

（四）泛型结合接口使用 

function 函数名<泛型名称 extends 接口名称> (参数 : 泛型名称) : 数据类型

interface Inter{
  length: number;
}
 
// 泛型T必须使Inter实现类
function fnextends Inter>(a: T): number{
  return a.length;
}
 
fn<string>("123");
fn<number>(123);  // 报错：类型“number”不满足约束“Inter”

（五）泛型在类中的使用

class 类名<泛型名称> {

        属性: 泛型名称; 

        constructor(属性: 泛型名称) { //... }

  }

class Myclass {
  name: T;
  constructor(name: T) {
    this.name = name;
  }
}
 
const c = new Myclass<string>("XunLin");