【金秋打卡】第7天 Web前端架构师2022版

课程名称：Web前端架构师2022版

课程章节： 第8周 前端基础技术回顾和巡礼

主讲老师：张轩

课程内容：

今天学习的内容包括：

2-3 泛型基础知识
2-4 解析源码：泛型和接口

课程收获：

泛型的动机

function echo(arg) {
  return arg
}
const result = echo(123)

这时候我们发现了一个问题，我们传入了数字，但是返回了 any，我们的变量就丧失了类型，这可不是一个好现象，但是我们传入的类型是多种多样的，什么都可以，字符串，数字，布尔，甚至是复杂类型。这样传入和返回没法做到统一，甚至还可能出这么一个 bug，我们直接把result 定义成 string, 但是这里没有出现任何错误，因为我们返回的是any啊，但是理论上大家都知道，我们返回的是一个 number 类型。

从我们之前讲的，类型推论，假如给一个变量赋值，ts 是可以帮你猜测到它的类型的，但是到了函数，我们发现它猜不了了，
这就是 泛型诞生的 第一个原因，类型推断没法流动到函数里面去。但是我们还是想根据传入参数的不同返回对应的类型。 ts 其实所有的思想就是获得类型的，没有正确的类型，那么它的威力就少了百分之九十，这就是泛型出现的第一个原因

泛型的定义

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

function echo<T>(arg: T): T {
  return arg
}

多个值的泛型

当然我们的泛型也可以传入多个值，这个时候我们又了新的需求，我们又一个 tuple，里面有两个值，他们的类型都是随意的，这时候我要返回一个新的 tuple，调换他们的位置。这时候我们就新建一个函数：

泛型的另外一个应用
泛型在函数中第二个意义也可以和参数一点没有关系，因为在函数体内可能会做一些副作用操作，我们想再执行操作的时候再确定它返回类型，比如我们有一个通用的发送一步请求的方法,我们想根据不同的 url 请求定义不同的返回数据。

function withAPI(url: string): Promise<any> {
  return fetch(url).then(resp => resp.json())
}

假如这个时候调用 withAPI，会发现 response 本身是 any，这很不爽，使用 ts 看到any很讨厌。我们希望调用对应的 api，根据你预知的返回给他设定类型。

泛型的奇妙，它在函数中就像一条管道，

第一它可以使用在参数上，
第二可以直接用在函数逻辑内部