课程名称: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,根据你预知的返回给他设定类型。
泛型的奇妙,它在函数中就像一条管道,
第一它可以使用在参数上,
第二可以直接用在函数逻辑内部