1，介绍
泛型相当于是一个类型变量，有时无法预先知道具体的类型，可以用泛型来代替。
通常会附属于函数，类，接口，类型别名之上。
举例：
在定义函数时，有时会丢失一些类型信息（多个位置应该保持一致）。
function handleArray(arr: any[], n: number): any[] {
const temp: any[] = arr.slice(n)
return temp
}
handleArray([1,2,30], 2)
handleArray(['1', '2', '3'], 2)
当传递 number 类型数组时，上面代码中所有 any[] 都应该是 number[]，string 数组同理。
用泛型来解决：
function handleArray<T>(arr: T[], n: number): T[] {
const temp: T[] = arr.slice(n)
return temp
}
handleArray<number>([1,2,30], 2)
handleArray<string>(['1', '2', '3'], 2)
1，在函数中使用
使用方式：定义函数和调用函数时，都在函数名之后使用 < > 来定义泛型名称。
function handleArray<T>(arr: T[]): T[] {
// ...
}
handleArray<number>()
handleArray<string>()
泛型对函数来说：在调用函数时，告诉函数操作的具体类型，函数在执行时就能确定具体的类型。
特点：
1，只有在调用时，才能确定泛型的具体类型。
2，一般情况下，TS会智能的根据传递的参数，推导出泛型的具体类型。
以上面的例子来说，即便调用时没有写具体的泛型类型，函数也会根据传递的参数智能推导：
如果无法完成推导，并且没有传递具体的类型，默认为 unknown。
function handleArray<T>(arr: any[], n: number): T[] {
const temp: T[] = arr.slice(n)
return temp
}
// unknown[]
const res = handleArray([1,2,30], 2)
3，泛型也可以有默认值。
几乎用不到，因为泛型就是用来表示可能得任意类型。
function handleArray<T = number>(arr: T[]): T[] {
// ...
}
2，在类型别名，接口中使用
看例子即可，实现一个 filter 函数。
// type callback = (n: number, i: number) => boolean;
// type callback<T> = (n: T, i: number) => boolean;
interface callback<T> {
(n: T, i: number): boolean;
}
function filter<T>(arr: T[], callback: callback<T>): T[] {
let temp: T[] = [];
arr.forEach((n, i) => {
if (callback(n, i)) {
temp.push(arr[i]);
}
});
return temp;
}
const res = filter([1, 2, 3, 4], (n, i) => n % 2 !== 0);
console.log(res);
3，在类中使用
类名上指定的泛型，可以传递到定义的属性和方法上。
type callback<T> = (item: T, index?: number, arr?: T[]) => boolean;
class ArrayHelper<T> {
constructor(private arr: T[]) {}
myFilter(callback: callback<T>): T[] {
let tempArr: T[] = [];
this.arr.forEach((item, index, arr) => {
if (callback(item, index, arr)) {
tempArr.push(item);
}
});
return tempArr;
}
}
const tempArr = new ArrayHelper([2, 3, 4, 5]);
const res = tempArr.myFilter((item) => item % 2 === 0);
console.log(res);
2，泛型约束
用于约束泛型的取值：必须得有类型约束（接口，类型别名）中的成员。
举例：泛型必须兼容 User 接口。
interface User {
name: string;
}
function updateName<T extends User>(obj: T): T {
obj.name = obj.name.toUpperCase();
return obj;
}
const obj = {
name: "lover",
age: 19,
};
const newNameObj = updateName(obj);
console.log(newNameObj);
3，多泛型
函数的参数会有多个，所以泛型也会有多个。
举例，混合2个不同类型的数组。
function mixinArray<T, K>(arr1: T[], arr2: K[]): (T | K)[] {
const temp: (T | K)[] = [];
for (let i = 0; i < arr1.length; i++) {
temp.push(arr1[i]);
temp.push(arr2[i]);
}
return temp;
}
console.log(mixinArray([1, 2], ["11", "22"]));
4，举例实现 Map
这是 Map 的接口定义
interface Map<K, V> {
clear(): void;
/**
* @returns true if an element in the Map existed and has been removed, or false if the element does not exist.
*/
delete(key: K): boolean;
/**
* Executes a provided function once per each key/value pair in the Map, in insertion order.
*/
forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void;
/**
* Returns a specified element from the Map object. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map.
* @returns Returns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.
*/
get(key: K): V | undefined;
/**
* @returns boolean indicating whether an element with the specified key exists or not.
*/
has(key: K): boolean;
/**
* Adds a new element with a specified key and value to the Map. If an element with the same key already exists, the element will be updated.
*/
set(key: K, value: V): this;
/**
* @returns the number of elements in the Map.
*/
readonly size: number;
}
简单模拟实现：
class MyMap<K, V> {
private keys: K[] = [];
private values: V[] = [];
get size() {
return this.keys.length;
}
clear(): void {
this.keys = [];
this.values = [];
}
delete(key: K): boolean {
const index = this.keys.indexOf(key);
if (index !== -1) {
this.keys.splice(index, 1);
this.values.splice(index, 1);
return true;
} else {
return false;
}
}
forEach(callbackfn: (value: V, key: K, map: MyMap<K, V>) => void): void {
this.keys.forEach((item, i) => {
callbackfn(this.values[i], item, this);
});
}
get(key: K): V | undefined {
const index = this.keys.indexOf(key);
return this.values[index];
}
has(key: K): boolean {
return return this.keys.includes(key);
}
set(key: K, value: V): this {
const index = this.keys.indexOf(key);
if (index !== -1) {
this.keys.push(key);
this.values.push(value);
} else {
this.values[index] = value;
}
return this;
}
}
const myMap = new MyMap<string, number>();
myMap.set("a", 1);
myMap.set("b", 2);
myMap.set("c", 3);
console.log(myMap.get("d"));
myMap.has("a");
console.log(myMap.delete("c"));
myMap.forEach((value, key, self) => {
console.log(value, key, self);
});
myMap.clear();
console.log(myMap.size);
以上。