ts泛型定义

最新推荐文章于 2026-02-14 14:23:11 发布

原创最新推荐文章于 2026-02-14 14:23:11 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文深入探讨了 TypeScript 中的泛型，包括泛型函数、泛型类、泛型接口和将泛型类作为参数的使用，旨在提高代码的复用性和支持多种数据类型。

泛型

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

泛型函数

function getData<T>(value: T): T {
    return value;
}
console.log(typeof getData<number>(123));
console.log(typeof getData<string>('123'));
console.log(typeof getData<Object>({value: 1}));

泛型类

class MinClass<T> {
    list: T[] = [];
    add(num: T) {
        this.list.push(num);
    }
    min(): T {
        let minNum = this.list[0];
        for(let i = 0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i];
            }
        }
        return minNum;
    }
}

const m = new MinClass<number>();
m.add(123);
m.add(321);
console.log(m.min())

const m1 = new MinClass<string>();
m1.add('123');
m1.add('321');
console.log(m1.min())

泛型接口

// 方法1
interface ConfigFn{
    <T>(name: T): T;
}
const fun: ConfigFn = function<T>(name: T): T {
    return name;
}
console.log(fun<string>('张三'));
console.log(fun<number>(123));


// 方法2
interface ConfigFn1<T>{
    (name: T): T;
}
function getData<T>(value: T): T {
    return value;
}
const useGetData: ConfigFn1<string> = getData;
console.log(useGetData('123'));

泛型类作为参数

class MySqlDb<T> {
    add(info: T) {
        console.log(info);
        return true;
    }
}

class User {
    name: string | undefined;
    age: number | undefined;
}

const user = new User();
user.name = '张三';
user.age = 18;

const db = new MySqlDb<User>();
db.add(user);