泛型概述
在编写代码的时候我们既要考虑代码的
健壮性, 又要考虑代码的灵活性和可重用性通过 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);
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
