← 返回首页
Vue3基础教程(十四)
发表时间:2021-08-05 17:44:22
泛型

什么是泛型呢?我们可以理解为泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,由程序员指定泛型具体指向什么类型。泛型在传统面向对象编程语言中是极为常见的,ts中当然也执行泛型,如果你理解c#或java中的泛型,相信也很容易理解Typescript的泛型。

1.泛型函数

/**
 * 获取数组中最小值 (T泛型通用)
 * @param {T[]} arr
 * @returns {T}
 */

function getMin<T>(arr: T[]): T {
    var min = arr[0];
    arr.forEach((value) => {
        if (value < min) {
            min = value;
        }
    });
    return min;
}

console.log(getMin([11, 23, 12, 5, 7, 8]));//1
console.log(getMin(["tom", "jerry", "jack", "sunny"])); //jack

2.泛型接口

interface IbaseCRUD <T> {
    data: T[]
    add: (t: T) => void
    getById: (id: string) => T
}

class User {
    id: string; //id主键
    name: string; //姓名
    age: number; //年龄

    constructor (id,name, age) {
        this.id = id;
        this.name = name
        this.age = age
    }
}

class UserCRUD implements IbaseCRUD <User> {
    data: User[] = []

    add(user: User): void {

        this.data.push(user)
        console.log('保存user', user.id)
    }

    getById(id: string): User {
        return this.data.filter(item => item.id===id)[0];
    }
}

const userCRUD = new UserCRUD()
userCRUD.add(new User("S001",'tom', 18))
userCRUD.add(new User("S002",'jack', 19))
console.log(userCRUD.data)

console.log(userCRUD.getById("S001"));

3.泛型类

// 泛型类
class GetMin<T>{
    arr:T[]=[];
    add(ele:T){
        this.arr.push(ele);
    }
    min():T{
        let min=this.arr[0];
        this.arr.forEach(function (value) {
            if(value<min){
                min=value;
            }
        });
        return min;
    }
}

let gm1= new  GetMin<number>();
gm1.add(5);
gm1.add(3);
gm1.add(2);
gm1.add(9);
console.log(gm1.min());

let gm2= new  GetMin<string>();
gm2.add("tom");
gm2.add("jerry");
gm2.add("jack");
gm2.add("sunny");
console.log(gm2.min());