7、详细版易学版TypeScript - 泛型详解

一、泛型的基本使用

泛型：定义时不确定是什么类型，就先定义为泛型，等到使用时再去确定具体的类型

//实现需求：根据传入的数据value和数量count，返回有count个value值的数组
const myFuncTest1 = (value: number, count: number): number[] => {
    const arr: number[] = [];
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
console.log(myFuncTest1(123, 3)); // [ 123, 123, 123 ]

// 泛型的基本使用：
// T表示任意输入的类型，也可以命名为TS，随你命什么名，大家习惯写为T
const myFuncTest2 = <T>(value: T, count: number): T[] => {
    const arr: T[] = [];
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
// 如果没有确定类型，会走类型推断
console.log(myFuncTest2(123, 3)); // [ 123, 123, 123 ]
// 如果确定了是string类型，就是string类型
console.log(myFuncTest2<string>('123', 3)); // [ '123', '123', '123' ]

二、多个泛型参数

参考元组

// 实现需求：调换数组元素的顺序
const multiFunc = <T, U>(arr: [T, U]): [U, T] => [arr[1], arr[0]];
// 如果没有确定类型，会走类型推断
console.log(multiFunc(["test", true])); // [ true, 'test' ]
// 如果确定了类型，就是确定的类型
console.log(multiFunc<number, null>([123, null])); // [ null, 123 ]

三、泛型约束

// 实现需求：获取一个参数的长度
// 实现方案：通过继承ILength接口，进行泛型约束，约束这个任意输入的类型，必须要有length属性
interface ILength {
    length: number
}
const getLength = <T extends ILength>(a: T): number => a.length;
console.log(getLength("123"));
console.log(conFunc(123)); // 报错，数字❌没有length属性

四、泛型接口

1、用泛型接口约束泛型函数方式一

interface IArr1 {
    <T>(value: T, count: number): Array<T>
}
const iarr1: IArr1 = <T>(value: T, count: number): Array<T> => {
    const arr: T[] = [];
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
console.log(iarr1("123", 3)); // [ '123', '123', '123' ]

2、用泛型接口约束泛型函数方式二

// 定义泛型接口时先不写死泛型接口的类型，泛型接口的类型为T，当使用接口时再去确定类型
interface IArr2<T> {
    (value: T, count: number): Array<T>
}
// 使用接口时需要先确定IArr2的类型，这里为<number>
const iarr2: IArr2<number> = <T>(value: T, count: number): Array<T> => {
    const arr: T[] = [];
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
console.log(iarr2(123, 3)); // [ 123, 123, 123 ]
console.log(iarr2("123", 3)); // 报错，类型“string”的参数❌不能赋给类型“number”的参数。

3、用泛型接口约束对象

interface IObj<T> {
    name: T
}
const obj1: IObj<string> = {
    name: "str"
}
const obj2: IObj<number> = {
    name: 123
}

五、泛型类

class Con<T> {
    name: string
    age: T
    constructor(name: string, age: T) {
        this.name = name;
        this.age = age;
    }
}
// 泛型类哪个属性用到T，这里的<number>就对应到哪个属性，这里指的是age属性
const con1 = new Con<number>("vite", 12);
console.log(con1); // Con { name: 'vite', age: 12 }
// 泛型类哪个属性用到T，这里的<string>就对应到哪个属性，这里指的是age属性
const con2 = new Con<string>("vite", "12");
console.log(con2); // Con { name: 'vite', age: '12' }