TypeScript-泛型

原创

杨不易呀

发布于 2023-09-28 19:12:20

4250

泛型概述

在编写代码的时候我们既要考虑代码的 健壮性, 又要考虑代码的 灵活性 和 可重用性 通过 TS 的静态检测能让我们编写的代码变得更加 健壮, 但是在变得健壮的同时却丢失了 灵活性 和 可重用性 所以为了解决这个问题 TS 推出了 泛型 的概念通过 泛型 不仅可以让我们的代码变得更加 健壮, 还能让我们的代码在变得 健壮 的同时保持 灵活性 和 可重用性

还是和之前一样的套路，利用一个需求来引出没有使用泛型的弊端，需求: 定义一个创建数组的方法, 可以创建出 指定长度 的数组, 并且可以用 任意指定的内容 填充这个数组：

第一版代码实现

let getArray = (value: number, items: number = 5): number[] => {
    return new Array(items).fill(value);
};
let arr = getArray(6, 3);
console.log(arr);

但是发现第一版的代码当中存在问题，就是只能存储 number：

第二版代码实现

let getArray = (value: any, items: number = 5): any[] => {
    return new Array(items).fill(value);
};

let arr = getArray("abc", 3);
console.log(arr);

如上需求实现代码当前存在的问题：

编写代码没有提示, 因为 TS 的静态检测不知道具体是什么类型
哪怕代码写错了也不会报错, 因为 TS 的静态检测不知道具体是什么类型

如果这个时候数组当中只有数字，那么就会存在属性调用问题，因为数字 number 当中是不存在 .length 的属性的所以会报错然而在编写的时候编译器是没有报错的：

let getArray = (value: any, items: number = 5): any[] => {
    return new Array(items).fill(value);
};

let arr = getArray(6, 3);

// arr = [6, 6, 6] => [3, 3, 3]
let res = arr.map(item => item.length);
console.log(res);

那么如上的需求就看到这里，接下来再看一个需求利用这个需求来引出泛型，需求: 要有代码提示, 如果写错了要在编译的时候报错：

代码实现

let getArray = <T>(value: T, items: number = 5): T[] => {
    return new Array(items).fill(value);
};

let arr = getArray<string>('abc');
let res = arr.map(item => item.length);
console.log(res);

如上代码我们指定泛型的类型为 string 所以调用 .length 就不会报错这是正常的，如果我们将泛型的类型改为 number 在来看的话编译器就会直接报错：

注意点

泛型具体的类型可以不指定, 如果没有指定, 那么就会根据我们传递的泛型参数自动推导出来

let getArray = <T>(value: T, items: number = 5): T[] => {
    return new Array(items).fill(value);
};
let arr = getArray("BNTang");
let res = arr.map(item => item.length);
console.log(res);

let getArray = <T>(value: T, items: number = 5): T[] => {
    return new Array(items).fill(value);
};
let arr = getArray(6);
let res = arr.map(item => item);
console.log(res);