19. TypeScript 函数泛型(难点)

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

编写一个联合类型 Demo

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

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

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

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

初始泛型概念-generic

泛型：[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");

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

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

以上关于19. TypeScript 函数泛型(难点)的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。