TS快速入门-泛型

最新推荐文章于 2025-01-22 22:41:14 发布

原创最新推荐文章于 2025-01-22 22:41:14 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #typescript

ts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在TypeScript中使用泛型，包括泛型函数、泛型接口、泛型类以及泛型约束。通过泛型，可以提高代码的复用性和类型安全性，避免使用any带来的问题。示例中详细解释了泛型在不同场景下的应用。

当我们定义一个变量不确定类型的时候有两种解决方式：

使用any
使用any定义时存在的问题：虽然知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势
使用泛型
泛型指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定具体类型的一种特性。

泛型函数

定义一个函数，传入两个参数，第一个参数是任何类型的数据，第二个参数是数量

函数的作用是根据数量产生对应个数的数据，存放在一个数组中

// <>里面传入类型
function getArr<T>(val: T, count: number): Array<T> {
    const arr: Array<T> = []; // 也可以这样定义 const arr: T[] = [];
    for(let i = 0; i < count; i++) {
        arr.push(val)
    }
    return arr
}

console.log(getArr<string>('温情key', 5));  // [ '温情key', '温情key', '温情key', '温情key', '温情key' ]
// 也可以省略调用时的类型，TS会帮我推断出这个参数的类型
console.log(getArr(true, 3));  // [ true, true, true ]

使用方式类似于函数传参，传什么数据类型，T就表示什么数据类型，T也可以换成任意合法字符串。

一个函数也可以定义多个泛型参数

function submit<T, K> (code: T, name: K): T {
    console.log(`提交了编号为${code}的${typeof code}类型和名称为${name}的${typeof name}类型物品`);
    return code;
}

submit(123, '兰陵王');  // 提交了编号为123的number类型和名称为兰陵王的string类型物品
submit('SG132', 8848);  // 提交了编号为SG132的string类型和名称为8848的number类型物品

泛型接口

在定义接口时, 为接口中的属性或方法定义泛型类型在使用接口时, 再指定具体的泛型类型

interface Search {
    <T, K>(val1: T, val2: K): K
}

const searchHandle: Search = <T, K>(id: T, name: K): K => {
    console.log('id' + id + ';' + '名称' + name);
    return name
}

searchHandle<number, string>(123, '温情key');  // id123;名称温情key

泛型类

在定义类时, 为类中的属性或方法定义泛型类型在创建类的实例时, 再指定特定的泛型类型

// 定义泛型类
class Generic<T> {
    defaultVal: T;
    add: (x: T, y: T) => T;
}

// 创建类实例 - number
const myNum = new Generic<number>();

myNum.defaultVal = 111;
myNum.add = function (x, y) {
    console.log(x + y);
    return x + y;
}

myNum.add(5, 2); // 7


// 创建类实例 - string
const myStr = new Generic<string>();

myStr.defaultVal = '温情';
myStr.add = function(x, y) {
    console.log(myStr.defaultVal + x + y);
    return myStr.defaultVal + x + y;
}

myStr.add('k', 'ey');  // 温情key

泛型约束

如果我们直接对一个泛型参数取 length 属性, 会报错, 因为这个泛型根本就不知道它有这个属性

// 没有泛型约束
function fn <T>(x: T): void {
    console.log(x.length)  // error   类型“T”上不存在属性“length”。
}

我们可以使用泛型约束来实现

interface LengthWise {
    length: number;
}

function fn<T extends LengthWise>(x: T): void {
    console.log(x.length);
}

/* 需要传入符合约束类型的值，必须包含必须 length 属性： */
// fn(123)  //  error  类型“number”的参数不能赋给类型“LengthWise”的参数。  因为number没有length属性

fn('温情key');  // 5