19. TypeScript 函数泛型(难点)

作者：文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196755.html

泛型我个人认为是 TypeScript 利的一个难点，我第一次学完后根本不能完全理解，所以从这节开始，我们应该算是一个进阶教程了，难度也开始上来了，如果你一遍看不太明白，可以反复看几次，然后多做练习。

现在跟着我做一个简单的join方法，方法接受两个参数first和second，参数有可能是字符串类型，也有可能是数字类型。方法里为了保证都可以使用，所以我们只作了字符串的基本拼接。

function join(first: string | number, second: string | number) {
  return `${first}${second}`;
}
join("mybj123", ".com");

这个方法现在没有任何问题，但现在有这样一个需求，就是first参数如果传的是字符串类型，要求second也传字符串类型。同理，如果是number类型，就都是number类型。

那现在所学的知识就完成不了啦，所以需要学习泛型来解决这个问题。

泛型：[generic – 通用、泛指的意思],那最简单的理解，泛型就是泛指的类型。

泛型的定义使用<>（尖角号）进行定义的，比如现在给join方法一个泛型，名字就叫做Mybj(演示你可以随便起一个名字，但工作中要进行语义化。)，后边的参数，这时候他也使用刚定义的泛型名称。然后在正式调用这个方法时，就需要具体指明泛型的类型啦。

function join<Mybj>(first: Mybj, second: Mybj) {
  return `${first}${second}`;
}
join < string > ("mybj123", ".com");

如果要是number类型，就直接在调用方法的时候进行更改就可以了。

join < number > (1, 2);

这就是最简单的泛型理解，因为在实际开发中，有很多对象和类的情况，里边的具体类型我们没办法了解，所以提供了这种泛型的概念。

如果传递过来的值要求是数字，如何用泛型进行定义呢？两种方法，第一种是直接使用[]，第二种是使用Array<泛型>。形式不一样，其他的都一样。

第一种写法:

function myFun<ANY>(params: ANY[]) {
  return params;
}
myFun < string > ["123", "456"];

第二种写法:

function myFun<ANY>(params: Array<ANY>) {
  return params;
}
myFun < string > ["123", "456"];

在工作中，我们经常使用<T>来作泛型的表示，当然这不是硬性的规定，只是大部分程序员的习惯性写法。

一个函数只能定义一个泛型吗？当然不是，是可以定义多个的，这里还是拿join方法举例，定义多个泛型，比如第一个泛型用T，第二个用P代表。

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join < number, string > (1, "2");

会了两种，你也就会了三种以上，泛型在造轮子的时候经常使用，因为造轮子很多东西都需要灵活性。泛型给了我们很好的灵活性。需要注意的是，如果函数定义了多个泛型，使用时要对应的定义出具体的类型。

泛型也是支持类型推断的，比如下面的代码并没有报错，这就是类型推断的功劳。

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join(1, "2");

但个人不建议去大量使用类型推断，这会让你的代码易读和健壮性都会下降，所以这个知识点，大家做一个了解就可以了。

好了，这就是本文的内容了，希望小伙伴们下去一定要练习一下，加深理解。

更多建站教程请访问 https://www.mimiwuqi.com/webqianduan/