ts泛型使用举例

官方文档地址：https://www.typescriptlang.org/docs/handbook/generics.html
中文文档：https://www.tslang.cn/docs/handbook/generics.html

使用ts页有一段时间了，对于我这种泥腿子前端来说，一开始就是为了赶个时髦学学ts，对于它对开发有什没特别的好处并不是非常能体会，反而在一开始的时候觉得为什么要搞一个这么麻烦的东西出来，各种编译错误，几度想放弃。其中对于泛型也是不理解，觉得这样约束好像并没有什么实质的作用，但经过了几个项目的开发，越来越觉得这是非常有必要的。

对于泛型，我是这样理解的，编写一个方法，让方法可以传入任意的参数，但是参数与参数，参数与结果之间存在一定的约束，以保证传入某个类型的参数就能得到确定类型的返回值，或者保证了我们传入值的正确性，当然泛型也可以使用在类的定义

如：我们编写一个类似lodash.find的方法

function find<T>(items: T[], callback: (item: T, index: number) => boolean): T | undefined {  for (let i = 0, length = items.length; i < length; i++) {    if (callback(items[i], i)) {      return items[i]
    }
  }
}const items = [{ a: 1 }, { a: 2 }, { a: 4 }, null ]const result = find(items, (item, index) => item.a === 2)

首先<T>是给函数声明了一个类型变量T，后面要求items是一个T类型的数组，然后后面的callback函数的参数item是一个T类型的变量，index为数字，然后callback返回boolean类型结果，整个find函数返回T类型结果或者undefined

如上，我们就能准确定义函数的每一个参数了，参数与参数，参数与返回结果之间就形成了约束关系

在使用的时候，由于定义了数组的元素必须是同一种类型，所以编译时就会提示错误

如果没有使用泛型，我们就只能使用any定义每一个参数了，如下

function find(items: any[], callback: (item: any, index: number) => boolean): any {  for (let i = 0, length = items.length; i < length; i++) {    if (callback(items[i], i)) {      return items[i]
    }
  }
}const items = [{ a: 1 }, { a: 2 }, { a: 4 }, null ]const result = find(items, (item, index) => item.a === 2)

以上代码，ts编译是可以通过的，但很明显是非常不严谨的，对于items的定义就可以很宽泛了，然而使用泛型的时候就限制了只能是某一种类型的数组，这样就可以把可能出现的错误在开发时就找出来

简单总结心得，又不正确的地方还请指正。

泥腿子前端的眼泪

作者：那少妇
链接：https://www.jianshu.com/p/a82424a9f8e8