vue3入门28 - typeScript 泛型基础使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

前言

泛型可以说是typeScript中最难啃的一块，我们这里先了解下基本用法就可以了。

泛型基础

• 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
• 我们再开发过程中，我们不仅要创建一致性的api，同时也要考虑可重用性。
• 在TypeScript中，我们可以使用泛型来创建可重用的组件代码，一个组件可以支持多种类型的数据。

定义函数

• 之前我们定义函数，可能是下面这样,指定参数和返回值具体的类型

function identity(arg: number): number {
    return arg;
}

• 当我们想给这个函数，定义传入字符串，返回还是字符串，就需要再定义一个类似的函数

function identity(arg: string): string {
    return arg;
}

• 这种情况，我们可以使用any来定义函数

function identity(arg: any): any {
    return arg;
}

• 使用any类型会导致这个函数可以接收任何类型参数，但是返回类型参数不一定是我们想要的类型，比如我们传入一个数字，返回一个字符串，都是有可能的。

使用泛型定义函数

• 为了满足上面的需求，我们需要一种方法使返回值类型和传入的参数类型是相同的。我们可以使用**类型变量，**它是一种特殊的变量，只用来表示类型，而不是值

function identity<T>(arg: T): T {
    return arg;
}

• 我们给identity函数添加了类型变量T，帮助我们捕获用户传入的类型，之后我们就可以使用这个类型了。比如我们传入number,参数类型就是number，返回值类型也是number

identity<number>(2)

• 我们把这种定义函数的方式叫做**泛型，**这里明确指定了T是number类型，使用<>传递参数。
• 我们也可以通过类型推论，来帮助我们自动推导T的类型

identity('string')

• 此时我们没有使用<>来传入类型，但是我们传入的是字符串，typeScript会自动推导出类型。

总结

这一节，我们了解了泛型的基础使用方式，通过泛型，可以提高我们代码的复用性。