首页 前端知识 【TS】TypeScript泛型 T 的用法详解

【TS】TypeScript泛型 T 的用法详解

2024-06-14 09:06:12 前端知识 前端哥 343 221 我要收藏

一、什么是泛型?

泛型,从字面上理解,泛型就是一般的,广泛的的意思。

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

泛型中的 T 就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出。
泛型在成员之间提供有意义的约束,这些成员可以是:函数参数、函数返回值、类的实例成员、类的方法等。

二、使用泛型的好处

  1. 函数和类可以轻松支持多种类型,增强程序的拓展性
  2. 不必写冗长的业务代码,增强代码的可拓展性
  3. 灵活控制类型之间的约束

三、泛型的基本使用

1. 处理函数参数

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

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

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

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

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

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

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

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

当然也可以结合类型别名type与接口interface使用.

类型别名用来给一个类型起个新名字(它并不是一个类型,只是一个别名而已)。常用于联合类型。
接口来定义对象的类型,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

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

2. 默认参数

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

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

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

const myPrint: Iprint = print

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

3. 处理多个函数参数

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

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。
let tom: [string, number] = [‘Tom’, 25]; // 定义一对值分别为 string 和 number 的元组

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 项类型的控制。方便编辑器提示。

4. 函数副作用操作

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

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

function request(url:string) {
    return fetch(url).then(res => res.json())
}
// 调一个获取用户信息的接口:
request('user/info').then(res =>{
    console.log(res)
})

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

我们希望调用 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)
})

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

https://juejin.cn/post/7064351631072526350
https://juejin.cn/post/7193917621069152311

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12084.html
标签
评论
发布的文章

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!