全面解析 TypeScript 泛型的二三事

news2024/10/6 12:23:46

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.coloradmin.cn/o/1903307.html

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

相关文章

Git在多人开发中的常见用例

前言 作为从一个 svn 转过来的 git 前端开发,在经历过git的各种便捷好处后,想起当时懵懂使用git的胆颤心惊:总是害怕用错指令,又或者遇到报错就慌的场景,想起当时查资料一看git指令这么多,看的头晕眼花&am…

STM32F103C8T6核心板原理图和PCB分享

PCB图 原理图 资料下载地址: 原理图PCB库: https://545c.com/d/45573183-61875742-29897c?p7526 (访问密码: 7526)

Unity【入门】场景切换和游戏退出及准备

1、必备知识点场景切换和游戏退出 文章目录 1、必备知识点场景切换和游戏退出1、场景切换2、鼠标隐藏锁定相关3、随机数和自带委托4、模型资源的导入1、模型由什么构成2、Unity支持的模型格式3、如何指导美术同学导出模型4、学习阶段在哪里获取模型资源 2、小项目准备工作需求分…

小柴带你学AutoSar系列一、基础知识篇(7)术语

目录 缘起 AUTOSAR 专业术语 RH850 专业术语 其他相关术语 flechazohttps://www.zhihu.com/people/jiu_sheng 小柴冲刺嵌入式系统设计师系列总目录https://blog.csdn.net/qianshang52013/article/details/

WordPress网站违法关键词字过滤插件下载text-filter

插件下载地址:https://www.wpadmin.cn/2025.html 插件介绍 WordPress网站违法关键词字过滤插件text-filter由本站原创开发,支持中英文关键字自动替换成**号,可以通过自定义保存修改按钮增加“预设关键字”,也可以导入定义好的txt文本形式的关…

医院挂号系统小程序的设计

管理员账户功能包括:系统首页,个人中心,患者管理,医生管理,专家信息管理,科室管理,预约信息管理,系统管理 微信端账号功能包括:系统首页,专家信息&#xff0…

算法011:最大连续的1的个数

最大连续的1的个数. - 备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/max-consecutive-ones-iii/ 乍一看,这道题很奇怪,什么叫最多翻转k个0&a…

Raylib实现拖拽视口显示

拖拽看左上角数字 #include <raylib.h> // 重整原因&#xff1a;解决新函数放大缩小之下&#xff0c;raylib 的网格采样部分&#xff0c;选择数组的一部分刷新倒缓冲区里 // 从直接建立缓冲区&#xff0c;到先在数组里进行移动&#xff0c;然后再设置检查缓冲区// 最大距…

批量文本编辑管理神器:一键修改多处内容,轻松转换编码,助力工作效率飞跃提升!

在信息爆炸的时代&#xff0c;文本处理已成为我们日常工作中不可或缺的一部分。无论是处理文档、整理数据还是编辑资料&#xff0c;都需要对大量的文本进行管理和修改。然而&#xff0c;传统的文本编辑方式往往效率低下&#xff0c;容易出错&#xff0c;难以满足现代工作的高效…

JimuReport 积木报表 v1.7.7 版本发布,一款免费的报表工具

项目介绍 一款免费的数据可视化报表工具&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完…

go语言的异常处理机制

error 在go语言中&#xff0c;异常被定义为实现了error接口的类型&#xff0c;error接口只定义了一个返回string类型Error&#xff08;&#xff09;方法&#xff0c;任何实现了Error()方法的类型都可以被定义为异常&#xff0c;以下是一个自定义的异常类型&#xff1a; typ…

28行代码完成深度学习模型——线性模型 01

在这里插入代码片## 线性模型 机器学习中的线性模型是一种预测模型&#xff0c;它基于线性关系来预测输出值。这种模型假设输入特征&#xff08;自变量&#xff09;和输出&#xff08;因变量&#xff09;之间存在线性关系。线性模型通常具有以下形式&#xff1a; y x*w b 其…

代码随想录算法训练营第二十七天|452. 用最少数量的箭引爆气球、435. 无重叠区间、763.划分字母区间

452. 用最少数量的箭引爆气球 如何使用最少的弓箭呢&#xff1f; 直觉上来看&#xff0c;貌似只射重叠最多的气球&#xff0c;用的弓箭一定最少&#xff0c;那么有没有当前重叠了三个气球&#xff0c;我射两个&#xff0c;留下一个和后面的一起射这样弓箭用的更少的情况呢&am…

生成式AI的短板在于“Token”的存在

生成式AI模型处理文本的方式与人类不同。理解它们基于“token”的内部环境&#xff0c;可能有助于解释一些奇怪行为和固有局限性。 从小型设备上的Gemma到OpenAI领先行业的GPT-4o&#xff0c;大多数模型都是基于一种称为Transformer的架构。由于Transformer在将文本与其他类型…

Golang | Leetcode Golang题解之第220题存在重复元素III

题目&#xff1a; 题解&#xff1a; func getID(x, w int) int {if x > 0 {return x / w}return (x1)/w - 1 }func containsNearbyAlmostDuplicate(nums []int, k, t int) bool {mp : map[int]int{}for i, x : range nums {id : getID(x, t1)if _, has : mp[id]; has {retu…

电商利器——淘宝商品月销量API接口解析

在电商时代&#xff0c;数据就是金钱。对于淘宝商家而言&#xff0c;掌握商品的销量数据无异于掌握了市场的脉搏。如今&#xff0c;淘宝商品月销量API接口的出现&#xff0c;联讯数据让商家如虎添翼&#xff0c;能够更加精准地把握市场动态&#xff0c;优化商品策略。 淘宝商…

Unity3D游戏 RPG

丛林探险游戏 人物进行探险游戏 拥有登录&#xff0c;首页&#xff0c;3D物体旋转浏览的功能&#xff0c;还能进行种植树等功能

[图解]SysML和EA建模住宅安全系统-12-内部块图

1 00:00:00,580 --> 00:00:02,770 接下来我们来画流了 2 00:00:03,100 --> 00:00:05,050 首先第一个是站点状态 3 00:00:05,140 --> 00:00:08,130 从这里到这里&#xff0c;我们画一个过来 4 00:00:10,290 --> 00:00:11,890 这里流到这里 5 00:00:11,900 -->…

[c++] 可变参数模版

前言 可变参数模板是C11及之后才开始使用,学校的老古董编译器不一定能用 相信大家在刚入门c/c时都接触过printf函数 int printf ( const char * format, ... ); printf用于将数据格式化输出到屏幕上,它的参数非常有意思,可以支持任意数量,任意类型的多参数.而如果我们想实现类…

算法系列--分治排序|归并排序|逆序对的求解

一.基本概念与实现 归并排序(mergeSort)也是基于分治思想的一种排序方式,思路如下: 分解:根据中间下标mid将数组分解为两部分解决:不断执行上述分解过程,当分解到只有一个元素时,停止分解,此时就是有序的合并:合并两个有序的子区间,所有子区间合并的结果就是原问题的解 归并…