轻松拿下 TS 泛型

「这是我参与2022首次更文挑战的第18天,活动详情查看:2022首次更文挑战」。

前言

泛型,是 TS 最难理解的部分,拿下了泛型,TS 就没什么难的了。

这是本文的知识图谱:

image.png

你掌握了吗?没掌握就一起来查漏补缺吧。

学习本文之前,先要有 TS 基础,如果觉得阅读吃力,可以先学习这篇文章,通俗易懂的 TS 基础知识总结

为什么需要泛型?

如果你看过 TS 文档,一定看过这样两段话:

软件工程中,我们不仅要创建一致的定义良好的 API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

简直说的就不是人话,你确定初学者看得懂?

我觉得初学者应该要先明白为什么需要泛型这个东西,它解决了什么问题?而不是看这种拗口的定义。

我们还是先来看这样一个例子,体会一下泛型解决的问题吧。

定义一个 print 函数,这个函数的功能是把传入的参数打印出来,再返回这个参数,传入参数的类型是 string,函数返回类型为 string。

function print(arg:string):string {
    console.log(arg)
    return arg
}
复制代码

现在需求变了,我还需要打印 number 类型,怎么办?

可以使用联合类型来改造:

function print(arg:string | number):string | number {
    console.log(arg)
    return arg
}
复制代码

现在需求又变了,我还需要打印 string 数组、number 数组,甚至任何类型,怎么办?

有个笨方法,支持多少类型就写多少联合类型。

或者把参数类型改成 any。

function print(arg:any):any {
    console.log(arg)
    return arg
}
复制代码

且不说写 any 类型不好,毕竟在 TS 中尽量不要写 any。

而且这也不是我们想要的结果,只能说传入的值是 any 类型,输出的值是 any 类型,传入和返回并不是统一的

这么写甚至还会出现bug

const res:string = print(123) 
复制代码

定义 string 类型来接收 print 函数的返回值,返回的是个 number 类型,TS 并不会报错提示我们。

这个时候,泛型就出现了,它可以轻松解决输入输出要一致的问题。

注意:泛型不是为了解决这一个问题设计出来的,泛型还解决了很多其他问题,这里是通过这个例子来引出泛型。

泛型基本使用

处理函数参数

我们使用泛型来解决上文的问题。

泛型的语法是 <> 里写类型参数,一般可以用 T 来表示。

function print<T>(arg:T):T {
    console.log(arg)
    return arg
}
复制代码

这样,我们就做到了输入和输出的类型统一,且可以输入输出任何类型。

如果类型不统一,就会报错:

image.png

泛型中的 T 就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出

泛型的写法对前端工程师来说是有些古怪,比如 <> T ,但记住就好,只要一看到 <>,就知道这是泛型。

我们在使用的时候可以有两种方式指定类型。

  • 定义要使用的类型
  • TS 类型推断,自动推导出类型
print<string>('hello')  // 定义 T 为 string

print('hello')  // TS 类型推断,自动推导类型为 string
复制代码

我们知道,type 和 interface都可以定义函数类型,也用泛型来写一下,type 这么写:

type Print = <T>(arg: T) => T
const printFn:Print = function print(arg) {
    console.log(arg)
    return arg
}
复制代码

interface 这么写:

interface Iprint<T> {
    (arg: T): T
}

function print<T>(arg:T) {
    console.log(arg)
    return arg
}

const myPrint: Iprint<number> = print
复制代码

默认参数

如果要给泛型加默认参数,可以这么写:

interface Iprint<T = number> {
    (arg: T): T
}

function print<T>(arg:T) {
    console.log(arg)
    return arg
}

const myPrint: Iprint = print
复制代码

这样默认就是 number 类型了,怎么样,是不是感觉 T 就如同函数参数一样呢?

处理多个函数参数

现在有这么一个函数,传入一个只有两项的元组,交换元组的第 0 项和第 1 项,返回这个元组。

function swap(tuple) {
    return [tuple[1], tuple[0]]
}
复制代码

这么写,我们就丧失了类型,用泛型来改造一下。

我们用 T 代表第 0 项的类型,用 U 代表第 1 项的类型。

function swap<T, U>(tuple: [T, U]): [U, T]{
    return [tuple[1], tuple[0]]
}
复制代码

这样就可以实现了元组第 0 项和第 1 项类型的控制。

image.png

传入的参数里,第 0 项为 string 类型,第 1 项为 number 类型。

在交换函数的返回值里,第 0 项为 number 类型,第 1 项为 string 类型。

第 0 项上全是 number 的方法。

image.png

第 1 项上全是 string 的方法。

image.png

函数副作用操作

泛型不仅可以很方便地约束函数的参数类型,还可以用在函数执行副作用操作的时候。

比如我们有一个通用的异步请求方法,想根据不同的 url 请求返回不同类型的数据。

function request(url:string) {
    return fetch(url).then(res => res.json())
}
复制代码

调一个获取用户信息的接口:

request('user/info').then(res =>{
    console.log(res)
})
复制代码

这时候的返回结果 res 就是一个 any 类型,非常讨厌。

image.png

我们希望调用 API 都清晰的知道返回类型是什么数据结构,就可以这么做:

interface UserInfo {
    name: string
    age: number
}

function request<T>(url:string): Promise<T> {
    return fetch(url).then(res => res.json())
}

request<UserInfo>('user/info').then(res =>{
    console.log(res)
})
复制代码

这样就能很舒服地拿到接口返回的数据类型,开发效率大大提高:

image.png

约束泛型

假设现在有这么一个函数,打印传入参数的长度,我们这么写:

function printLength<T>(arg: T): T {
    console.log(arg.length)
    return arg
}
复制代码

因为不确定 T 是否有 length 属性,会报错:

image.png

那么现在我想约束这个泛型,一定要有 length 属性,怎么办?

可以和 interface 结合,来约束类型。

interface ILength {
    length: number
}

function printLength<T extends ILength>(arg: T): T {
    console.log(arg.length)
    return arg
}
复制代码

这其中的关键就是 <T extends ILength>,让这个泛型继承接口 ILength,这样就能约束泛型。

我们定义的变量一定要有 length 属性,比如下面的 str、arr 和 obj,才可以通过 TS 编译。

const str = printLength('lin')
const arr = printLength([1,2,3])
const obj = printLength({ length: 10 })
复制代码

这个例子也再次印证了 interface 的 duck typing

只要你有 length 属性,都符合约束,那就不管你是 str,arr 还是obj,都没问题。

当然,我们定义一个不包含 length 属性的变量,比如数字,就会报错:

image.png

泛型的一些应用

使用泛型,可以在定义函数、接口或类的时候,不预先指定具体类型,而是在使用的时候再指定类型。

泛型约束类

定义一个栈,有入栈和出栈两个方法,如果想入栈和出栈的元素类型统一,就可以这么写:

class Stack<T> {
    private data: T[] = []
    push(item:T) {
        return this.data.push(item)
    }
    pop():T | undefined {
        return this.data.pop()
    }
}
复制代码

在定义实例的时候写类型,比如,入栈和出栈都要是 number 类型,就这么写:

const s1 = new Stack<number>()
复制代码

这样,入栈一个字符串就会报错:

image.png

这是非常灵活的,如果需求变了,入栈和出栈都要是 string 类型,在定义实例的时候改一下就好了:

const s1 = new Stack<string>()
复制代码

这样,入栈一个数字就会报错:

image.png

特别注意的是,泛型无法约束类的静态成员

给 pop 方法定义 static 关键字,就报错了

image.png

泛型约束接口

使用泛型,也可以对 interface 进行改造,让 interface 更灵活。

interface IKeyValue<T, U> {
    key: T
    value: U
}

const k1:IKeyValue<number, string> = { key: 18, value: 'lin'}
const k2:IKeyValue<string, number> = { key: 'lin', value: 18}
复制代码

泛型定义数组

定义一个数组,我们之前是这么写的:

const arr: number[] = [1,2,3]
复制代码

现在这么写也可以:

const arr: Array<number> = [1,2,3]
复制代码

数组项写错类型,报错

image.png

实战,泛型约束后端接口参数类型

我们来看一个泛型非常有助于项目开发的用法,约束后端接口参数类型。

import axios from 'axios'

interface API {
    '/book/detail': {
        id: number,
    },
    '/book/comment': {
        id: number
        comment: string
    }
    ...
}


function request<T extends keyof API>(url: T, obj: API[T]) {
    return axios.post(url, obj)
}

request('/book/comment', {
    id: 1,
    comment: '非常棒!'
})
复制代码

这样在调用接口的时候就会有提醒,比如:

路径写错了:

image.png

参数类型传错了:

image.png

参数传少了:

image.png

开发效率大大提高啊!可以早点和后端联调完,摸鱼去了。

小结

泛型(Generics),从字面上理解,泛型就是一般的,广泛的。

泛型是指在定义函数、接口或类的时候,不预先指定具体类型,而是在使用的时候再指定类型。

泛型中的 T 就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出

泛型在成员之间提供有意义的约束,这些成员可以是:函数参数、函数返回值、类的实例成员、类的方法等。

用一张图来总结一下泛型的好处:

image.png

如果我的文章对你有帮助,你的赞👍就是对我的最大支持^_^

传送门:

「1.9W字总结」一份通俗易懂的 TS 教程,入门 + 实战!

TS 中 interface 和 type 究竟有什么区别?

分类:
前端