全面解析 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.mzph.cn/pingmian/42256.shtml

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

相关文章

06浅谈大语言模型可调节参数TopP和TopK

浅谈大模型参数TopP和TopK 大语言模型中的temperature、top_p和top_k参数是用来控制模型生成文本时的随机性和创造性的。下面分享一下topP和topK两个参数的意义及逻辑; top K(Top-K Sampling) 作用:只从模型认为最可能的k个词中选…

时间、查找、打包、行过滤与指令的运行——linux指令学习(二)

前言:本节内容标题虽然为指令,但是并不只是讲指令, 更多的是和指令相关的一些原理性的东西。 如果友友只想要查一查某个指令的用法, 很抱歉, 本节不是那种带有字典性质的文章。但是如果友友是想要来学习的,…

Amesim中删除计算结果保存计算文件

前言 Amesim在工程应用中计算的结果文件有时会很大,为了节省电脑存储空间,项目结束后可以将计算结果删除进行保存以存档。 操作步骤 具体操作步骤如下: Step1:在①File下打开(Open)需要删除计算结果的项…

DAMA学习笔记(四)-数据建模与设计

1.引言 数据建模是发现、分析和确定数据需求的过程,用一种称为数据模型的精确形式表示和传递这些数据需求。建模过程中要求组织发现并记录数据组合的方式。数据常见的模式: 关系模式、多维模式、面向对象模式、 事实模式、时间序列模式和NoSQL模式。按照描述详细程度…

第1节、基于太阳能的环境监测系统——MPPT充电板

一、更新时间: 本篇文章更新于:2024年7月6日23:33:30 二、内容简介: 整体系统使用太阳能板为锂电池充电和系统供电,天黑后锂电池为系统供电,本节主要介绍基于CN3722的MPPT太阳能充电模块,这块主要是硬件…

AE的首选项设置

打开AE,点击 编辑->首选项->常规 显示 点击“所有关键帧”,这样显示路径就会显示所有关键帧 导入 将序列素材改为25帧每秒,作为以后制作的默认 媒体和磁盘缓存 根据个人需求选择磁盘缓存的文件夹,如果d盘空间充足,就改成…

Git中两个开发分支merge的原理

一 分支合并 1.1 原理 分支合并:就是将A分支修改后且commit的内容,合并到B分支,这些修改且提交的内容和B分支对应的内容和位置进行比较: 1.不一样的话,提示冲突,需要人工干预。 2.一样的话,…

网页封装APP:让您的网站变身移动应用

网页封装APP:让您的网站变身移动应用 随着移动设备的普及,越来越多的人开始使用移动设备浏览网站。但是,传统的网站设计并不适合移动设备的屏幕尺寸和交互方式,这导致了用户体验不佳和流失。 有没有办法让您的网站变身移动应用&…

14-43 剑和诗人17 - ActiveRAG之主动学习

​​​​​ 大型语言模型 (LLM) 的出现开启了对话式 AI 的新时代。这些模型可以生成非常像人类的文本,并且比以往更好地进行对话。然而,它们在仅依赖预训练知识方面仍然面临限制。为了提高推理能力和准确性,LLM 需要能够整合外部知识。 检索…

每日一题~oj(贪心)

对于位置 i来说,如果 不选她,那她的贡献是 vali-1 *2,如果选他 ,那么她的贡献是 ai. 每一个数的贡献 是基于前一个数的贡献 来计算的。只要保证这个数的前一个数的贡献是最优的,那么以此类推下去,整体的val…

AI让大龄程序员重新焕发活力

AI是在帮助开发者还是取代他们? 在软件开发领域,生成式人工智能(AIGC)正在改变开发者的工作方式。无论是代码生成、错误检测还是自动化测试,AI工具正在成为开发者的得力助手。然而,这也引发了对开发者职业…

华为云简介

前言 华为云是华为的云服务品牌,将华为30多年在ICT领域的技术积累和产品解决方案开放给客户,致力于提供稳定可靠、安全可信、可持续创新的云服务,赋能应用、使能数据、做智能世界的“黑土地”,推进实现“用得起、用得好、用得放心…

优化视频编辑体验:精准高效视频分割,降低误差率,显著提升处理精度与效率

在数字创意飞速发展的今天,视频编辑已成为展现创意与才华的重要舞台。然而,面对海量的视频素材和复杂的编辑需求,如何快速、准确地完成视频分割,成为了每一个视频编辑师心中的难题。今天,我们荣幸地向您介绍一款颠覆性…

摸鱼大数据——Spark SQL——DataFrame详解一

1.DataFrame基本介绍 DataFrame表示的是一个二维的表。二维表,必然存在行、列等表结构描述信息​表结构描述信息(元数据Schema): StructType对象字段: StructField对象,可以描述字段名称、字段数据类型、是否可以为空行: Row对象列: Column对象&#xff…

Rejetto HFS 服务器存在严重漏洞受到攻击

AhnLab 报告称 ,黑客正在针对旧版本的 Rejetto HTTP 文件服务器 (HFS) 注入恶意软件和加密货币挖矿程序。 然而,由于存在错误, Rejetto 警告用户不要使用 2.3 至 2.4 版本。 2.3m 版本在个人、小型团队、教育机构和测试网络文件共享的开发…

力扣 第 134 场双周赛 解题报告 | 珂学家

前言 题解 T1/T3是环形的处理技巧,这边可以double数组(更准确地讲,添加一个合适的小尾巴). T4是典题,前不久周赛刚考过,是一道结论题,也可以借助数据结构处理。 T1. 交替组 I 和T3一起讲 T2. 与敌人战斗后的最大分数…

生产调度:flowshop问题数学建模

接上一篇文章,在了解生产调度问题的背景和基本概念之后,我想先从比较基础的 flowshop和 jobshop 数学模型入手,理解实际调度过程中的问题求解思路。这一篇文章主要面向 flowshop 问题进行数学建模,对于这类比较经典的问题&#xf…

2007-2022年 国内各上市公司绿色化转型数据.(Excel文件、dta文件、参考文献、计算方法与说明)

上市公司绿色化转型数据为研究者提供了评估企业在生态文明建设、循环经济和绿色管理方面表现的重要视角。以下是对中国各上市公司绿色化转型数据的介绍: 数据简介 定义:上市公司绿色化转型是指企业在发展模式上向可持续发展转变,实现资源节…

成人高考报名条件及收费标准详解

成人高考报名条件及收费标准详解 您想通过成人高考改变自己的命运,但不知道报名条件和收费标准?本文将为您详细介绍成人高考报名条件和收费标准,并为您提供专业的成人教育服务。 深圳成人高考www.shenzhixun.com 成人高考报名条件 成人高考…

CH11_JS的多重循环

第11章:Javascript的多重循环 本章目标 掌握二重循环的使用 掌握二重循环的控制语句的使用 课程回顾 循环控制有那几种方式 讲解内容 1. 回顾练习 需求说明 某次程序大赛,AI2101班有4名学员参加,学员的成绩由用户输入,计算…