泛型概述
- 在编写代码的时候我们既要考虑代码的
健壮性, 又要考虑代码的灵活性 和可重用性 - 通过 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);
