先看一段代码
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;
