「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」
Hope is a good thing, maybe the best of things. And no good thing ever dies—— 《The Shawshank Redemption》
前言
TypeScript 是JavaScript类型的超集，它可以编译成纯JavaScript。目前在我们日常开发中是比较常见的，特别是在一个组件库或者大型的应用业务中。
为什么选择使用 TypeScript?
TypeScript is a smart choice when writing a modern web- or JavaScript-based application. TypeScript’s carefully considered language features and functionality, and its consistently improving tools, result in a terrifically productive development experience
在编写基于web或javascript的现代应用程序时，TypeScript是一个明智的选择。TypeScript经过仔细考虑的语言特性和功能，以及不断改进的工具，带来了非常高效的开发体验
JavaScript 本身是一门弱类型的语言，特别的灵活，这是它的有点，但是同时也是容易被吐槽的。引入 TypeScript 后，我们可以避免很多类型上的错误，对应打可读性和后续的可维护性都是很大的提高。
为什么使用泛型？
引入官方的说法：
软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
看到这个，会不会觉的很生涩，很不好理解呢？简而言之就是：不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
举个栗子：
function createArray<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
✅ 可以指定它具体的类型为 string
createArray<string>(3, 'x'); // ['x', 'x', 'x']
✅ 可以不手动指定，而让类型推论自动推算出来
createArray(3, 'x'); // ['x', 'x', 'x']
我们在函数名后添加了 <T>，其中T用来指代任意输入的类型，在后面的输入value: T和输出 Array<T> 中即可使用了
对接口增加泛型约束
使用泛型可以对接口增加约束条件
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // arg 包含了 .length 属性
return arg;
}
❌ loggingIdentity(2); // 类型“number”的参数不能赋给类型“Lengthwise”的参数
// 泛型函数被定义了约束，因此它不再是适用于任意类型， 必须包含必须的属性。
✅ loggingIdentity({length: 2})
✅ loggingIdentity('hello')
在泛型约束中使用类型参数
声明一个类型参数，且它被另一个类型参数所约束。
// getProperty函数可以传入一个对象 obj 和对象中的键 key，从而获取这个对象中的值
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
let x = { a: 1, b: 2, c: 3, d: 4 };
❌ getProperty(x, "m"); // 类型“"m"”的参数不能赋给类型“"a" | "b" | "c" | "d"”的参数
✅ getProperty(x, "a");
泛型定义数组
数组的定义我们通常这样写：
const arr: string[] = ['a', 'b'];
使用泛型后：
const arr: Array<string> = ['a', 'b'];
结语
如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。
文章如有错误之处，希望在评论区指正🙏🙏
欢迎关注我的微信公众号，一起交流技术，微信搜索 🔍 ：「 五十年以后 」
