当前位置: 首页 > news >正文

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

一、什么是泛型?

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

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 为 stringprint('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: stringage: 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

相关文章:

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

一、什么是泛型&#xff1f; 泛型&#xff0c;从字面上理解&#xff0c;泛型就是一般的&#xff0c;广泛的的意思。 TypeScript中泛型&#xff08;Generics&#xff09;是指在定义函数、接口或类的时候&#xff0c;不预先指定具体类型&#xff0c;而是在使用的时候再指定类型…...

Vue 3.0 单文件组件 【Vue3 从零开始】

#介绍 在很多 Vue 项目中&#xff0c;我们使用 app.component 来定义全局组件&#xff0c;紧接着用 app.mount(#app) 在每个页面内指定一个容器元素。 这种方式在很多中小规模的项目中运作的很好&#xff0c;在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的…...

北邮22信通:你是不是在looking for……那串代码?(2)第三章单链表

相信有了第二章顺序表的基础&#xff0c;小伙伴们学习第三章链表应该会轻松一点吧 目录 类模板下的单链表 1.1书上干净完整代码&#xff08;无增改、适合自己动手实验&#xff09; 1.2对书上代码的完善和对一些问题的验证和解释代码 1.补全一个函数&#xff1a; 2.this指…...

蓝库云|告诉你传统产业该如何进行数字化转型

在后疫情时代下&#xff0c;企业该如何在面临生存危机的情形下&#xff0c;投入「数字化转型」、提升公司竞争力&#xff0c;已成为许多公司的当务之急&#xff0c;但到底什么是数字化转型呢&#xff1f;传统产业又如何着手进行数位转型&#xff1f; 数字化转型是什么&#xf…...

121.(leaflet篇)leaflet结合echarts4迁徙图

听老人家说:多看美女会长寿 地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: 下面献上完整代码,代码重要位置会做相应解释 <!DOCTYPE html> <html>...

链表及其基本操作

1.单链表&#xff1a;1.1定义/性质&#xff1a;链表是线性表的链式存储方式。单链表通过指针线性遍历&#xff0c;删除/增加节点时间复杂度为O(1&#xff09;,访问节点时间复杂度为O(n)。单链表分为带头结点和不带头结点两种&#xff0c;带头结点是为了方便统一操作&#xff08…...

【Java基础 下】 031 -- 反射 动态代理

一、什么是反射&#xff1f; 换句话说就是&#xff08;从类里拿出来&#xff09; 可以获取到&#xff1a;&#xff08;利用反射&#xff0c;我们可以获取到类中所有的东西&#xff09; 获取是先从class字节码文件中获取的 二、获取class对象的三种方式 三种方式也对应了三种阶段…...

springcloud3 GateWay

一 GateWay 1.1 GateWay的作用 gateway相当于所有服务的门户&#xff0c;将客户端请求与服务端应用相分离&#xff0c;客户端请求通过gateway后由定义的路由和断言进行转发&#xff0c;路由代表需要转发请求的地址&#xff0c;断言相当于请求这些地址时所满足的条件&#xff…...

万字长文:Stable Diffusion 保姆级教程

万字长文&#xff1a;Stable Diffusion 保姆级教程 2022年绝对是人工智能爆发的元年&#xff0c;前有 stability.ai 开源 Stable Diffusion 模型&#xff0c;后有 Open AI 发布 ChatGPT&#xff0c;二者都是里程碑式的节点事件&#xff0c;其重要性不亚于当年苹果发布iPhone&a…...

WAMP搭建靶场

WAMP W&#xff1a;windows A&#xff1a;apache M&#xff1a;mysql&#xff0c;mariadb P&#xff1a;php 1. 下载phpstudy Windows版phpstudy下载 - 小皮面板(phpstudy) 2. 安装phpstudy 默认安装即可 3. 下载DVWA靶场 https://github.com/digininja/DVWA/archive/…...

Uipath Excel 自动化系列13-ForEachExcelSheet(遍历Sheet)

活动描述 ForEachExcelSheet(遍历Sheet)&#xff1a;遍历Excel中的工作表&#xff0c;可以对 Excel 工作簿中的每个工作表重复一个或多个活动,该活动需与Use Excel File 活动选择的 Excel 文件一起使用。 使用场景&#xff1a;当处理包含多张工作表的 Excel 文件&#xff0c;…...

JDBC快速入门

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; 目录 一、JDBC入门 1.概述 (1)JDBC本质 (2)JDBC好处 2.快速入门 (1)步骤 (2)实践 (3)两个小问题 一、JDBC入门 1.概述 JDBC就是使用Java语言操作关系型数据库的一套API&#xff0c;全称&#xff1a;( Java…...

蓝桥杯三月刷题 第六天

文章目录&#x1f4a5;前言&#x1f609;解题报告&#x1f4a5;星期计算&#x1f914;一、思路:&#x1f60e;二、代码&#xff1a;&#x1f4a5;考勤刷卡&#x1f914;一、思路:&#x1f60e;二、代码&#xff1a;&#x1f4a5;卡片&#x1f914;一、思路:&#x1f60e;二、代…...

分享几个常用的运维 shell 脚本

今天咸鱼给大家分享几个不错的 Linux 运维脚本&#xff0c;这些脚本中大量使用了 Linux 的文本三剑客&#xff1a; awkgrepsed 建议大家这三个工具都要了解并最好能够较为熟练的使用 根据 PID 显示进程所有信息 根据用户输入的PID&#xff0c;过滤出该PID所有的信息 #! /b…...

分隔链表(精美图示详解哦)

全文目录引言分隔链表题目描述与思路实现总结引言 前面&#xff0c;我们熟悉了管理链表中的数据的方法&#xff0c;也了解了几道与链表相关的题目&#xff1a; 戳我看单链表详解哦 在本篇文章中&#xff0c;我们将再了解一道题目&#xff1a;分隔链表&#xff1a; 分隔链表OJ…...

腾讯乐固加固+app签名+多渠道打包

一、腾讯乐固-基础版免费加固-上传未加固的app-下载加固包&#xff08;加固成功会清除原apk的签名信息和多渠道信息&#xff09;https://console.cloud.tencent.com/ms/reinforce/list/basic二、使用AndroidStudio自带工具apksigner对apk重新签名找到apksigner.bat文件 路径D:\…...

Spring Boot整合Redis缓存(Lettuce)

spring-boot-demo-cache-redis 此 demo 主要演示了 Spring Boot 如何整合 redis&#xff0c;操作redis中的数据&#xff0c;并使用redis缓存数据。连接池使用 Lettuce。 Lettuce官网 pom.xml <!-- data-redis --> <dependency><groupId>org.springframework…...

Feign

而Feign则会完全代理HTTP请求&#xff0c;我们只需要像调用方法一样调用它就可以完成服务请求及相关处理。Feign整合了Ribbon和Hystrix&#xff0c;可以让我们不再需要显式地使用这两个组件。 Feign具有如下特性&#xff1a; 支持可插拔的HTTP编码器和解码器; 支持Hystrix和…...

【代码训练营】day54 | 392.判断子序列 115.不同的子序列

所用代码 java 判断子序列 LeetCode 392 题目链接&#xff1a;判断子序列 LeetCode 392 - 简单 思路 这题和之前求最长公共子序列一样。 dp[i] [j]&#xff1a;以i-1为结尾的字符串s 和 以j-1为结尾的字符串t 组成的相同子序列的长度 递推公式&#xff1a; 相等dp[i][j] d…...

【unity3D】创建TextMeshPro(TMP)中文字体(解决输入中文乱码问题)

&#x1f497; 未来的游戏开发程序媛&#xff0c;现在的努力学习菜鸡 &#x1f4a6;本专栏是我关于游戏开发的学习笔记 &#x1f236;本篇是unity的TMP中文输入显示乱码的解决方式 创建 TextMeshPro 中文字体遇到的问题描述解决方式Font Asset Creator 面板扩展中文字体文本遇到…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...