【TypeScript】泛型

说明

泛型的使用：当定义类型时（函数、变量、接口、类），只有在使用的时候，才只是具体是什么类型时，就可以使用泛型定义

引入

实现生成 传入指定元素，指定长度的数组

function creatArray(value: any, count: number): any[] {
    let arr: any[] = []; // 需要初始化
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
console.log(creatArray('XX', 5)) //  ['XX', 'XX', 'XX', 'XX', 'XX']

使用泛型

function creatArray<T>(value: T, count: number): T[] {
    let arr: T[] = []; // 需要初始化
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
console.log(creatArray<number>(22, 5)) // [22, 22, 22, 22, 22]

多个泛型参数的函数

泛型常用字母K、V、T

function creatArray<K, V>(x: K, y: V): [K, V] {
    return [x, y]
}
console.log(creatArray<number, string>(22, 'XX')) // [22, 'XX']

泛型接口

在实现接口时，再 定义类型

// 泛型接口
interface IbaseCRUD<T> {
    data: T[]
    add(t: T): void
    getById(id: number): T

}

class User {
    id?: number; // id 主键
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

class UserCRUD implements IbaseCRUD<User> {
    data: User[] = []
    add(user: User): void {
        user = { ...user, id: Date.now() }
        this.data.push(user);
        console.log('save user', user)
    }
    getById(id: number): User {
        return this.data[id]
    }
}
const userCRUD = new UserCRUD()
userCRUD.add(new User('XX', 16))
userCRUD.add(new User('YY', 17))
console.log(userCRUD.getById(1)) // {name: 'YY', age: 17, id: 1646630710525}

泛型类

在实例化类时，再定义类型

class User {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

class UserCRUD<T>{
    data: T[] = []
    add(user: T): void {
        this.data.push(user);
        console.log('save user', user)
    }
}
const userCRUD = new UserCRUD<User>();
userCRUD.add(new User('XX',16)) // save user User {name: 'XX', age: 16}

泛型 约束

当使用泛型时，函数逻辑中，可能并不知道该类型有这个方法 或 属性，而报错，智能提示也不好

function fn<T>(x: T): void {
    // console.log(x.lenght) // 报错: 类型“T”上不存在属性“lenght”。
}

处理：泛型继承某类、某接口

一个泛型变量只能继承一个 类 或者 接口

    class User {
        constructor(
            public name: string,
            public age: number) { }
    }
    // 泛型 继承 User 类
    function fn<T extends User>(x: T): void {
        console.log(x.name, x.age)
    }

    // 传入符合 这中类型 的值
    fn(new User('XX', 16)) // XX 16