先看一段代码

function join(first:string|number, second:string|number) {
  return `${first}${second}`
}

// join("1", "1");
// join(1, "1");
join(1, 1);

• 上边的join方法的参数，有3种情况，都可以运行成功。
• 但是，当我们提出了新的需求，比如当first传了一个number类型，我们要求second也要传一个number类型。这个时候就需要借助泛型generic这个概念。

泛型，可以理解为泛指的类型(不确定的类型)。泛型通过<>来定义,泛型的名字是自定义的。

// join方法接受一个ABC泛型，至于ABC具体是什么类型，还不知道
// join方法的两个参数，都必须是ABC这个类型
function join<ABC>(first: ABC, second: ABC) {
  return `${first}${second}`
}

// 调用join方法的时候，就要给泛型指定具体的类型
join<string>("1", "1");

join<number>(2, 2);

• 拓展一下用法

function map<ABC>(params:ABC[]) {
  return params;
}

map<string>(['123'])

// 等价于
function map<ABC>(params:Array<ABC>) {
  return params;
}

map<string>(['123'])

泛型里，不仅可以定义一个类型，还可以定义多个类型

function join<T,P>(first: T, second: P) {
  return `${first}${second}`
}
join<string,number>("1", 1);

定义了泛型，调用的时候，不传具体的泛型的话，TS会根据你传的参数，去推断前边的泛型到底是什么类型

function join<T,P>(first: T, second: P) {
  return `${first}${second}`
}
join("1", 1);

image.png

函数返回的结果的类型，也可以用泛型指定

function newJoin<T>(first: T, second: T):T {
  return first;
}

上边主要是泛型的基础概念和函数里如何使用泛型，接下来看一下类里如何使用泛型。

• 先看下联合类型，类DataManager接受字符串数组或数字组成的数组。也就是一个联合类型。

class DataManager {
  constructor(private data: string[] | number[]) { }
  getItem(index:number):string|number {
    return this.data[index];
  }
}

const data = new DataManager(['1']);
data.getItem(0);

• 但是未来当data 要存的不仅仅是字符串数组和数字数组之外，还要存其他类型的数组，这个时候使用联合类型来定义，会变得很麻烦。这个时候就需要借助泛类型的灵活性来解决这个灵活性的问题。

class DataManager<T> {
  constructor(private data:T[]) { }
  getItem(index:number):T {
    return this.data[index];
  }
}

const data = new DataManager<string>(['1']);
data.getItem(0);

• 泛型继承接口interface。当泛型继承了interface，那么泛型就要包含interface里所有的属性和方法。

interface Item{
  name:string
}

class DataManager<T extends Item> {
  constructor(private data:T[]) { }
  getItem(index:number):string {
    return this.data[index].name;
  }
}

const data = new DataManager([{name:'yang'}]);
data.getItem(0);

• 泛型是灵活的，当我们通过泛型定义类型的时候，意味着，我们可以给这个泛型赋予任何的类型。但是有时候，我们希望把泛型的类型限制在个别类型中。该怎么办呢？ 还是要通过继承来实现

class DataManager<T extends string|number> {
  constructor(private data:T[]) { }
  getItem(index:number):T {
    return this.data[index];
  }
}

const data = new DataManager<number>([1])

image.png

用泛型来声明类型

// 冒号后的意思是，func是一个函数，这函数会返回一个string
// 等号后是具体的函数实现
const func: () => string = () => {
  return '123';
}

• 如何使用泛型做为一个具体的类型注解

function hello<T>(params: T) {
  return params;
}

const func: <T>(params:T) => T = hello;