全面解析 TypeScript 泛型的二三事

2024年了相信大家都已经在日常开发的过程中使用上了 TypeScript 了。TypeScript 增强了代码可靠性和可维护性,确保减少运行时错误并提高开发人员的工作效率。

TypeScript 通过类型声明 使得 javascript 拥有了强类型校验。而泛型的是类型声明中最重要的一环,通过运用 泛型, 可以让我们更好地扩展类型声明。

今天我们来分析一下 TypeScript 泛型。

什么是泛型

我们先来看一下真实的仓库里面写的一个泛型带来的压迫感吧(hhhh)

第一眼看上去感觉东西很多,,,不知道从哪里看过来

说回来,泛型简单来说(Generics)是一种可以使类、接口和函数能够处理不同类型的方式,而不需要明确指定具体的类型。

TypeScript 中,泛型通过在类、接口和函数的声明中引入类型变量来实现。

这里我们可以看一个函数定义泛型的示例:

红色的方框:定义的泛型类型 SomeType

黄色的方框:使用泛型SomeType来约束函数的参数是 SomeType类型数组

绿色的方框:约束函数的返回值为 泛型 SomeType 本身

需要注意的是,泛型本身不是 TypeScript 类型,而是类型参数,即调用函数时将指定的类型的占位符。

对于泛型的命名,可以将其命名为任何您想要的名称(只要它不是保留关键字(例如 constenum)或已导入的类型名称)。一般我们经常使用单个字母来表示泛型,例如 T

其实可以简单理解为 泛型 是一种 类型的占位

定义泛型

函数参数的泛型定义

在函数中使用泛型,常用于约束函数参数的类型。需要注意的是函数参数的泛型定义和调用都是定义在函数参数列表的括号前

我们还可以定义多个泛型,只要通过 , 进行分隔就行

接口 Interface 的泛型定义

接口的泛型定义的位置是紧跟在接口名称后面

当泛型在使用的时候,指定了具体的类型之后,我们就不能违背这个类型,否则会触发 TypeScript 编译错误的提示

类型别名 type 的泛型定义

同样的类型别名也可以通过定义泛型来扩大自己的类型声明范围。类型别名定义泛型的位置和接口 Interface 定义的方式是一致的

Class 的泛型定义

类定义泛型是在 类名 后面,如果是匿名类的话,就是直接定义在 class 后面。

泛型的约束

泛型通过 extend 关键字实现泛型的约束,就是在一些场景下,你知道这个泛型的类型不确定,但是你知道这个类型一定有一些固定的属性,或者一定是属于某一个基础类型,这时候我们可以使用泛型约束,确保传递的参数一定具有某个属性或者属于某一种类型,这样就能安全地在 函数体内执行相关的属性或方法

如果我们传递的类型不满足约束条件时, TS 就会在运行的阶段会提示我们,这样可以避免我们产生后续的 bug

泛型的默认类型

泛型的默认类型和参数的默认类型一样,也是通过 = 来声明一个泛型的默认类型

使用默认类型,可以让我们在调用的时候,如果不传递类型给泛型,泛型也能获取到默认类型应用到具体的变量约束上。

infer 在泛型中的应用

在泛型中,我们经常会使用 infer 对泛型做进一步的类型推定, 进一步将范围进行缩小,推断到我们想要的类型。

这里我们可以看一下 内置的 ReturnType 的实现

在这个示例中,ReturnType 是一个条件类型,它检查类型 T 是否符合函数类型 (...args: any[]) => infer R。如果 T 是一个函数类型,TypeScript 会推断出函数的返回类型 R

infer 目前只能在 extends 的条件语句中

内置的泛型工具函数

TS 内置了很多工具函数,具体可以查看官方文档关于Utility Types 部分

Partial

将类型 T 的所有属性变为可选属性。

  • keyof T 获取类型 T 的所有属性名。
  • [P in keyof T] 是一个映射类型,它遍历 T 的所有属性名。
  • T[P] 获取属性名 P 对应的属性类型。
  • ?: 将属性变为可选属性。

Required

将类型 T 的所有属性变为必选属性。

  • keyof T 获取类型 T 的所有属性名。
  • [P in keyof T] 是一个映射类型,它遍历 T 的所有属性名。
  • T[P] 获取属性名 P 对应的属性类型。
  • -? 移除可选属性修饰符 ?,将属性变为必选属性。

Readonly

将类型 T 的所有属性变为只读属性。

  • keyof T 获取类型 T 的所有属性名。
  • [P in keyof T] 是一个映射类型,它遍历 T 的所有属性名。
  • T[P] 获取属性名 P 对应的属性类型。
  • readonly 将属性变为只读属性。

小结

泛型作为 ts 中重要的基石的存在,学会了 泛型的使用,可以让我们编写更加健壮且可维护的代码

如果这篇文章对你有帮助,欢迎点赞、关注、转发!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1474506.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

vue单独部署到宝塔教程

配置反向代理 注意:如果目标网站是https则写https否则写http 2.关于解决部署后无法刷新,直接报错404 location / { try_files $uri $uri/ /index.html; }

【WebRTC实现点对点视频通话】

介绍 WebRTC (Web Real-Time Communications) 是一个实时通讯技术,也是实时音视频技术的标准和框架。简单来说WebRTC是一个集大成的实时音视频技术集,包含了各种客户端api、音视频编/解码lib、流媒体传输协议、回声消除、安全传输等。对于开发者来说可以…

建投数据入选“2024年中国最佳信创企业管理软件厂商”

近日,建投数据凭借国产化自主知识产权、完备的信创资质及信创软硬件环境全栈适配能力,入选第一新声联合天眼查发布的“2024年中国最佳信创厂商系列榜单”细分行业榜之“最佳信创企业管理软件厂商”。 本次最佳信创厂商系列榜单评选,包括综合榜…

ffmpeg图片视频编辑器工具的安装与使用

title: ffmpeg图片视频编辑器工具的安装与使用 tags: [ffmpeg, 图片, 音频, 视频, 工具, 流媒体] categories: [工具, ffmpeg] FFmpeg是一个开源的命令行工具,广泛用于处理视频和音频文件,包括转换格式、剪辑、混流、解码、编码等。以下是一些基本的FFmp…

智能充电(新能源电动车,电单车)云管理系统的定制解决方案

一 系统简介 智能充电(新能源电动车,电单车)云管理系统 是一套能够实现对充电站/桩的实时通讯、状态监控、故障检测、运营分析、数据统计、策略设置的智能化多任务管理系统。 二 平台概览 智能充电云管理系统 https://chongdianzhuang.itg…

C# 如何获取属性的displayName的3种方式

文章目录 1. 使用特性直接访问2. 使用GetCustomAttribute()方法通过反射获取3. 使用LINQ查询总结和比较 在C#中,获取属性的displayName可以通过多种方式实现,包括使用特性、反射和LINQ。下面我将分别展示每种方法,并提供具体的示例代码。 1.…

如何让代码兼容 Python 2 和 Python 3?Future 库助你一臂之力

目录 01Future 是什么? 为什么选择 Future? 安装与配置 02Future 的基本用法 1、兼容 print 函数 2、兼容整数除法 3、兼容 Unicode 字符串 03Future 的高级功能 1. 处理字符串与字节 2. 统一异常处理…

Facebook数据仓库的变迁与启示

❃博主首页 &#xff1a; <码到三十五> ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a; <搬的每块砖&#xff0c;皆为峰峦之基&#xff1b;公众号搜索(码到…

IntelliJ IDEA教育版在Windows电脑中的下载、安装方法

本文介绍IntelliJ IDEA软件Community&#xff08;社区版&#xff09;在Windows操作系统中的下载、安装、运行与使用方法。 IntelliJ IDEA软件是一款由JetBrains公司开发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于Java语言的开发&#xff0c;但同时也支持其…

昇思25天学习打卡营第12天|简单的深度学习ResNet50图像分类 - 构建ResNet50网络

ResNet主要解决深度卷积网络在深度加深时候的“退化”问题。在一般的卷积神经网络中&#xff0c;增大网络深度后带来的第一个问题就是梯度消失、爆炸&#xff0c;这个问题Szegedy提出BN层后被顺利解决。BN层能对各层的输出做归一化&#xff0c;这样梯度在反向层层传递后仍能保持…

使用ElementUI组件库

引入ElementUI组件库 1.安装插件 npm i element-ui -S 2.引入组件库 import ElementUI from element-ui; 3.引入全部样式 import element-ui/lib/theme-chalk/index.css; 4.使用 Vue.use(ElementUI); 5.在官网寻找所需样式 饿了么组件官网 我这里以button为例 6.在组件中使用…

STM32-I2C

本内容基于江协科技STM32视频学习之后整理而得。 文章目录 1. I2C通信1.1 I2C通信简介1.2 硬件电路1.3 I2C时序基本单元1.3.1 起始条件和终止条件1.3.2 发送一个字节1.3.3 接收一个字节1.3.4 发送应答和接收应答 1.4 I2C时序1.4.1 指定地址写1.4.2 当前地址读1.4.3 指定地址读…

Postman使用指南①网页版使用

postman官网地址&#xff1a;Postman API Platform 进入后点击右上角免费注册&#xff0c;注册后登录 登录之后即可在网页使用&#xff0c;无需下载

【网络安全】实验七(ISA防火墙的规则设置)

一、实验目的 二、配置环境 打开两台虚拟机&#xff0c;并参照下图&#xff0c;搭建网络拓扑环境&#xff0c;要求两台虚拟机的IP地址要按照图中的标识进行设置&#xff0c;并根据搭建完成情况&#xff0c;勾选对应选项。注&#xff1a;此处的学号本人学号的最后两位数字&…

C++ STL 多线程库用法介绍

目录 一&#xff1a;Atomic&#xff1a; 二&#xff1a;Thread 1. 创建线程 2. 小心移动(std::move)线程 3. 如何创建带参数的线程 4. 线程参数是引用类型时&#xff0c;要小心谨慎。 5. 获取线程ID 6. jthread 7. 如何在线程中使用中断 stop_token 三&#xff1a;如何…

leetcode每日一题-3033. 修改矩阵

题目描述&#xff1a; 解题思路&#xff1a;简单题目&#xff0c;思路非常直接。对列进行遍历&#xff0c;记录下最大值&#xff0c;然后再遍历一遍&#xff0c;把-1替换为最大值。需要注意的是进行列遍历和行遍历是不同的。 官方题解&#xff1a; class Solution { public:v…

图片管理新纪元:高效批量横向拼接图片,一键生成灰色艺术效果,打造专业视觉体验!

在数字时代&#xff0c;图片已成为我们生活和工作中不可或缺的一部分。但面对海量的图片&#xff0c;如何高效地进行批量管理、拼接和调色&#xff0c;成为许多人面临的难题。今天&#xff0c;我们为您带来了一款颠覆性的图片管理工具&#xff0c;让您轻松实现图片批量横向拼接…

STM32快速复习(七)IIC通信

文章目录 前言一、IIC是什么&#xff1f;二、标准库函数二、标准库示例代码总结 前言 IIC通信算是我在大学和面试中用的最多&#xff0c;问的最多的通信协议 工作后也经常用到&#xff0c;只是我负责的工作内容用的少&#xff0c;但是&#xff0c;一般项目中使用也是非常多的一…

Redis 五大数据类型底层原理

0、前言 本文涉及的主题&#xff1a; redis 对象存储 底层数据结构&#xff1a;int、embstr、raw、ziplist、listpack、quicklist、skiplist、intset、hashtable redis 数据类型&#xff1a;string、list、set、zset、hash 1、对象存储、底层编码、数据类型 1.1 对象存储…

linux RTC时钟时间出现了明显的偏移

RTC时钟时间出现了明显的偏移 1、开发环境2、问题阐述3、验证问题3.1、首先去排查了硬件电路和芯片电压不稳定的问题。3.2、晶振的问题。3.3、芯片本身3.4、芯片寄存器 4、代码修改 1、开发环境 平台&#xff1a;imx6ul kernel版本&#xff1a;linux4.1.5 RTC芯片&#xff1a;…