【TypeScript】泛型工具

跟着 小满zs 学 ts:学习TypeScript24(TS进阶用法-泛型工具)_ts泛型工具-CSDN博客

  • Partial 所有属性可选的意思
  • Required 所有属性必选的意思
  • Pick 提取部分属性
  • Exclude 排除部分属性
  • emit 排除部分属性并且返回新的类型

Partial

属性变为可选。

image.png

interface User {address?: stringname: stringage: number
}type PartialUser = CustomPartial<User>
// 原理
type CustomPartial<T> = {// in 操作符后面只能跟联合类型[P in keyof T]?: T[P]
}

Required

属性全部变为必选。

interface User {address?: stringname: stringage: number
}type RequiredUser = Required<User>
// 原理
type CustomRequired<T> = {// in 操作符后面只能跟联合类型[P in keyof T]-?: T[P]
}

注意这里是 -? ,而不是直接去掉喔~

Pick

提取属性类型。

image.png

interface User {address?: stringname: stringage: number
}// 从 User 中选择出 name 和 age 属性
type PickUser = Pick<User, 'name' | 'age'>
// 原理
type CustomPick<T, K extends keyof T> = {// in 操作符后面只能跟联合类型[P in K]: T[P]
}

Exclude

排除某个 / 某些类型。

image.png

interface User {address?: stringname: stringage: number
}// Exclude 排除的是联合类型 而不是 interface
type ExcludeUser = Exclude< 'name' | 'age' | 'address', 'name' | 'age'>
// 原理
// 这里使用 never 是因为 never 在联合类型中会被排除掉的
type CustomExclude<T, K> = T extends K ? never : T

这里有一个知识点需要注意。

以下来自:TS关键字extends用法总结 - 掘金 (juejin.cn)

对于使用extends关键字的条件类型(即上面的三元表达式类型),如果extends前面的参数是一个泛型类型,当传入该参数的是联合类型,则使用分配律计算最终的结果。分配律是指,将联合类型的联合项拆成单项,分别代入条件类型,然后将每个单项代入得到的结果再联合起来,得到最终的判断结果。

还是用上面的例子说明

  type P<T> = T extends 'x' ? string : number;type A3 = P<'x' | 'y'>  // A3的类型是 string | number

该例中,extends的前参为T,T是一个泛型参数。在A3的定义中,给T传入的是’x’和’y’的联合类型'x' | 'y',满足分配律,于是’x’和’y’被拆开,分别代入P<T>

P<'x' | 'y'> => P<'x'> | P<'y'>

'x’代入得到

'x' extends 'x' ? string : number => string

'y’代入得到

'y' extends 'x' ? string : number => number

然后将每一项代入得到的结果联合起来,得到string | number

总之,满足两个要点即可适用分配律:第一,参数是泛型类型,第二,代入参数的是联合类型

Omit

排除属性。

image.png

interface User {address?: stringname: stringage: number
}// 排除属性
type OmitUser = Omit<User, 'age' | 'address'>
// 原理
type CustomOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
  • Exclude 是针对联合类型,用于排除一些特定成员类型;
  • Omit 是针对对象类型,用于忽略或排除某些特定属性;

Record

约束对象的 key 和 value。

type key = 'c'|'x'| 'k'
type value = '唱' | '跳' | 'rap' | '篮球'let obj: Record<key, value> = {// key 不能缺 value 随意c: '唱',x: 'rap',k: 'rap'
}

并且支持嵌套,value 还可以是 Record<key, value>

image.png

// 原理
// 对象的 key 只能是 string | number | symbol
type ObjKey = keyof any
type CustomRecord<K extends ObjKey, V> = {[P in K]: V
}

returnType

获取函数的返回值的类型。

const fn = () => {return [1, 23, 34]
}
type arrNum = ReturnType<typeof fn>
// 原理
type CustomReturnType<T extends Function> = T extends (...args: any[]) => infer R ? R : any

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

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

相关文章

Qt-Advanced-Docking-System的学习

Qt5.12实现Visual Studio 2019 拖拽式Dock面板-Qt-Advanced-Docking-System_c_saide6000-GitCode 开源社区 (csdn.net) 我使用的是Qt5.5.0 开始&#xff0c;我下载的是最新版的源码&#xff1a;4.1版本 但是&#xff0c;打开ads.pro工程文件&#xff0c;无法编译成功。 然后…

RERCS系统开发实战案例-Part02 创建BOPF对应的业务对象(Business Object)

1、通过事务码 BOBF创建业务对象 2、输入debug&#xff0c;进入编辑模式新建BO对象&#xff1b; 选择对应的BO对象属性类别&#xff1a; 3、激活BO对象 接口页签&#xff1a; 属性页签&#xff1a;自动带出标准的常量 改接口类部分源码&#xff1a; 4、BO对象Node Elemen…

Golang的Gin框架

目录 功能以及简单使用 gin.Engine数据结构 RouterGroup methodTrees gin.context 功能以及简单使用 功能: • 支持中间件操作&#xff08; handlersChain 机制 &#xff09; • 更方便的使用&#xff08; gin.Context &#xff09; • 更强大的路由解析能力&#xff08…

Web前端在深圳:探索技术与创新的融合之地

Web前端在深圳&#xff1a;探索技术与创新的融合之地 在数字化浪潮席卷全球的今天&#xff0c;深圳作为中国最具创新活力的城市之一&#xff0c;其在Web前端领域的发展同样引人注目。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入剖析深圳在Web前端领域的独…

Linux之tar打包解包命令

Linux之tar打包解包命令 打包与压缩区别 打包&#xff0c;也称之为归档&#xff0c;指的是一个文件或目录的集合&#xff0c;而这个集合被存储在一个文件中。归档文件没有经过压缩&#xff0c;所占空间是其中所有文件和目录的总和。 压缩&#xff0c;将一个大文件通过压缩算法…

基于 Delphi 的前后端分离:之五,使用 HTMX 让页面元素组件化之面向对象的Delphi代码封装

前情提要 本博客上一篇文章&#xff0c;描述了使用 Delphi 作为后端的 Web Server&#xff0c;前端使用 HTMX 框架&#xff0c;把一个开源的前端图表 JS 库&#xff0c;进行了组件化。 上一篇文章仅仅是描述了简单的前端代码组件化的可能性&#xff0c;依然是基于前端库的 JS…

windows下的eclipse按Ctrl+Shift+F格式化代码不起作用的处理

1、先上张图&#xff1a; 上面Format&#xff1a;CtrlShiftF&#xff0c;按了以后不起作用。 2、这个快捷键不起作用的原因&#xff1a;可能是快捷键冲突了。 机器上装了Sougou输入法&#xff0c;将输入法切换为英文模式是起作用的。 那么应该就是这个原因了。 3、解决方法…

【Ardiuno】使用ESP32单片机创建web服务通过网页控制小灯开关的实验(图文)

经过实验测试ESP32单片机的网络连接还是很方便的&#xff0c;这里小飞鱼按照程序实例的代码亲自实验一下使用Esp32生成的网页服务来实现远程无线控制小灯开关功能&#xff0c;这样真的是离物联网开发越来越近了&#xff0c;哈哈&#xff01; 连接好开发板和电路&#xff0c;将…

React入门教程:构建你的第一个React应用

在当今快速发展的Web开发领域&#xff0c;前端技术日新月异&#xff0c;而React作为一款强大的JavaScript库&#xff0c;已经成为众多开发者的首选。React以其组件化、高效的性能和灵活的数据处理机制闻名于世&#xff0c;被广泛用于构建动态且复杂的用户界面。在本教程中&…

Elixir学习笔记——输入输出和文件系统

本章介绍输入/输出机制、文件系统相关任务以及相关模块&#xff08;如 IO、File 和 Path&#xff09;。IO 系统提供了一个很好的机会来阐明 Elixir 和 Erlang VM 的一些思维模式和新奇思想。 输入输出模块 输入输出模块是 Elixir 中读写标准输入/输出 (:stdio)、标准错误 (:s…

vue学习(一)

1.vue是用于构建用户界面的渐进式js框架&#xff0c;自底向上逐层的应用&#xff1a; 简单应用&#xff1a;只需一个轻量小巧的核心库&#xff1b; 复杂应用&#xff1a;可以引入各式各样的vue插件&#xff1b; 2.vue特点&#xff1a; 采用组件化模式&#xff0c;提高代码复…

Python中关于电商商品数据的采集【taobao/JD/商品详情数据返回】

在Python中采集电商商品数据&#xff08;如淘宝、京东等&#xff09;通常涉及到网络爬虫&#xff08;web scraping&#xff09;或称为网络数据抓取&#xff08;web data scraping&#xff09;。由于电商平台通常会有反爬虫机制&#xff0c;因此直接抓取数据可能会遇到各种挑战&…

基于51单片机的智能水表

一.硬件方案 本设计主要以51单片机作为主控处理器的智能水表&#xff0c;该水表能够记录总的用水量和单次用水量&#xff0c;当用水量超出设定值时系统发出声光报警提醒&#xff0c;水量报警值能够通过按键进行自行设置&#xff0c;并且存储于AT24C02中&#xff0c;并且可以测…

C++11默认成员函数控制

默认成员函数有 如果自己不显示声明&#xff0c;那么默认编译器会自己生成一个 如果有一个构造函数被声明了&#xff0c;那其他的默认函数编译器就不会再生成 这样的有时又不生成&#xff0c;容易造成混乱&#xff0c;于是C11让程序员可以控制是否需要编译器生成。 显式缺省函…

H5112B 降压恒流芯片12V24V36V48V60V72V100V 1.2ALED 调光无频闪光滑细腻

H5112B多功能LED恒流驱动器是一款具有良好性能与高度集成度的驱动芯片。以下是该产品的主要优点及应用领域的详细分析&#xff1a; 产品优点&#xff1a; 宽电压输入范围&#xff1a;H5112B支持5V至90V的宽电压输入范围&#xff0c;使其能够适应多种不同的电源环境&#xff0…

(虚拟机)VMware软件的安装及Ubuntu系统安装

一、VMware软件的安装 软件下载&#xff0c;可以自己找或者百度网盘下载&#xff1a; 通过百度网盘分享的文件&#xff1a;ubuntu16…等2个文件 链接:https://pan.baidu.com/s/1VEnZKY9DJ1T1vC3ae20gKQ 提取码:11b6 复制这段内容打开「百度网盘APP 即可获取」 1、解压VMwar…

本地生活元宇宙 橘子浑身都是宝,吃对营养加倍

橘子是秋冬季节的应季水果 含有丰富的营养价值 而且浑身都是宝 但你知道吗 吃橘子也是有讲究的 如何吃橘子才能营养最大化&#xff1f; 橘子有哪些食用禁忌&#xff1f; 一起来看看吧&#xff5e; 划重点 一颗橘子&#xff0c;3大营养 橘子具有开胃理气、止渴润肺、治胸膈结气、…

06--jenkins构建CI_CD

前言&#xff1a;上一篇文章整理了git的部署和使用&#xff0c;这章主要复习持续集成软件Jenkins&#xff0c;这个技术现在在云计算方面也是有应用的&#xff0c;同时也是越高级越智能的软件代表。 1、概念简介 1&#xff09;jenkins是什么 Jenkins是一个开源的、可扩展的持…

Linux 终端窗口设置为透明

Linux 终端窗口设置为透明 打开终端 右键鼠标 选择Profile Preferences 点击Background 选择 Transparent background 拖动滑条调整透明度 完成。

Nintex流程平台引入生成式人工智能,实现自动化革新

工作流自动化提供商Nintex宣布在其Nintex流程平台上推出一系列新的人工智能驱动改进。这些增强显著减少了文档化、管理和自动化业务流程所需的时间。这些新特性为Nintex流程平台不断扩展的人工智能能力增添了新的亮点。 Nintex首席产品官Niranjan Vijayaragavan表示&#xff1a…