TS-泛型

泛型就是解决 类、接口、方法的复用性以及对不特定数据类型对支持。

泛型函数

• any 与 泛型的区别

// 使用 any ： 入参类型 与 返回值类型 可以不一样
function getDataAny(value: any): any {
    return value + 'hhh';
}
console.log(getDataAny(12)); // 12hhh

// 使用 泛型  入参类型 与 返回值类型  必须一致
function getDataT<T>(value: T): T {
    return value;
    // return value + 'hhh'; // error 报错  传入的是number 返回的是string
}
console.log(getDataT<number>(12)); // 入参类型 与 返回值类型 一致
// getDataT<string>(12); // error 参数值不符合类型
console.log(getDataT<string>('str')); // str

泛型类

// 定义一个泛型类，用于输出最小值
class MinClass<T> {
    public list: T[] = [];
    add(value: T): void {
        this.list.push(value);
    }
    // 使用ASCII比较 字母
    min(): T {
        let minNum: T = this.list[0];
        for (let i = 0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i];
            }
        }
        return minNum;
    }
}
let numClass = new MinClass<number>();
numClass.add(10);
numClass.add(11);
numClass.add(3);
console.log(numClass.min()); // 3

let strClass = new MinClass<string>();
strClass.add('ddd');
strClass.add('ddc');
console.log(strClass.min()); // ddc

• 把类作为参数类型的泛型类

// 定义一个User的类的作用就是映射数据字段，然后定义一个 MysqlDb 的类这个类用于操作数据库，然后把User类作为参数传入到 MysqlDb 类中
class User {
    userName: string | undefined;
    password: string | undefined;
}
class ArticleCate {
    title: string | undefined;
    desc: string | undefined;
    status: number | undefined;
}
class UserBoy {
    name: string | undefined;
    age: number | undefined;
    sex?: string | undefined;
    // 构造函数 初始化参数
    constructor(params: {
        name: string | undefined,
        age: number | undefined,
        sex?: string | undefined
    }) {
        this.name = params.name;
        this.age = params.age;
        this.sex = params.sex;
    }
}
class MysqlDb<T> {
    add(obj: T):boolean {
        console.log(obj)
        return true;
    }
}

let user = new User();
user.userName = '张三';
user.password = '123456';
let  Db = new MysqlDb();
// User {userName: "张三", password: "123456"}
console.log(Db.add(user)); // true

let info = new ArticleCate();
info.title = '人民日报';
info.desc = '这是新闻';
info.status = 123;
let  MyDb = new MysqlDb();
// ArticleCate {title: "人民日报", desc: "这是新闻", status: 123}
console.log(MyDb.add(info)); // true

let userBoy = new UserBoy({
    name: '张三',
    age: 14,
    // sex: '女'
})
userBoy.sex = '男'
let userDb = new MysqlDb<UserBoy>();
// UserBoy {name: "张三", age: 14, sex: "男"}
console.log(userDb.add(userBoy)); // rrue

泛型接口

• 写法一

interface ConfigFn {
    <T>(value: T): T;
}
let getData: ConfigFn = function<T>(value: T):T {
    return value;
}
console.log(getData<number>(12)); // 12
// console.log(getData<string>(12)); // error 类型“12”的参数不能赋给类型“string”的参数。
console.log(getData<string>('str')); // str

• 写法二 （常用）

interface ConfigFun<T> {
    (value: T): T;
}
function getDataFunc<T>(value: T): T {
    return value;
}
let myDataFunc: ConfigFn = getDataFunc;
console.log(getDataFunc<number>(12)); // 12
// console.log(getData<string>(12)); // error 类型“12”的参数不能赋给类型“string”的参数。
console.log(getDataFunc<string>('str')); // str