从0开始的 TypeScriptの十四:内置工具类型

2023-11-15

在之前的《从0开始的TypeScriptの十三》中,已经对typescript的工具类型中的关键字inferextendskeyoftypeofin这些有所了解了,那么接下来为了使用更加方便,可以对typescript中内置的工具类型进行一些学习。

工具类型名称 描述 用法
Readonly<T> 将 T 中所有属性都变为只读 Readonly<{ a: number }> <===> { readonly a: number }
ReadonlyArray<T> 返回一个 T 类型的只读数组 ReadonlyArray<string> <===> readonly string[]
Partial<T> 将 T 中所有的属性都变成可选类型 Partial<{ a: number }> <===> { a?: number }
Required<T> 将 T 中所有的属性都变成必选类型 和上面的Partial正好相反
Pick<T, K extends keyof T> 从 T 中摘取部分属性 Pick<{ a: number, b: string, c: boolean }, 'a' | 'c'> <===> { a: number, c: boolean }
Omit<T, K extends keyof T> 从 T 中排除部分属性 Omit<{ a: number, b: string, c: boolean }, 'a' | 'c'> <===> { b: string }
Exclude<T, U> 从 T 中剔除可以赋值给 U 的类型 Exclude<number | string | boolean, string> <===> number | boolean
Extract<T, U> 提取 T 中可以赋值给 U 的类型 Exclude<number | string | boolean, string> <===> string
Record<K, T> 返回属性名为 K,属性值为 T 的类型 Record<'a' | 'b', () => void> <===> { a: ()=>void, b: ()=>void }
NonNullable<T> 从 T 中剔除 null 和 undefined NonNullable<string | null | undefined> <===> string
ConstructorParameters<T> 获取 T 的构造函数参数类型组成的元组 Compare是类,构造函数constructor(a: number, b:number){ ... }ConstructorParameters<typeof Compare> <===> [ a: number, b: number]
InstanceType<T> 由构造函数类型T的实例类型来构建一个新类型 InstanceType<typeof Compare> <===> Compare
Parameters<T> 获取函数参数类型组成的元组 Parameters<(a: number, b: string) => number> <===> [ a: number, b: number]
ReturnType<T> 获取函数返回值类型 ReturnType<(a: number, b: string) => number> <===> number


上面这些内置的工具类型能够很大程度上简化代码。

比如说给定一个interface接口,需要将内部所有属性都变成可选类型

虽然我们自己也可以写,但是如果直接使用现有的内置工具类型Partial不是更好么

interface A {
    name: string,
    age: number,
    action: ()=>void
}
type PartialFun<T> = {
    [K in keyof T] ? : T[K]
}
type _A = PartialFun<A>

或者说我在网上看到的一道转换题目:

  • 如何定义一个SetOptional工具类型,支持把给定的keys对应的属性变成可选的?
type Foo = {
	a: number;
	b?: string;
	c: boolean;
}

// 测试用例
type SomeOptional = SetOptional<Foo, 'a' | 'b'>;

这样在修改时思考方式,需要对Fooa | b匹配的属性拆除来变成可选,然后不匹配的属性维持不变,最后将可选和不可选通过& 进行联合

// 对应的属性变成可选
type CommonFun<T, K> = {
    [ t in keyof T as t extends K ? t: never] ?: T[t]
}
// 不对应的属性
type Unequal<T, K> = {
    [ t in keyof T as t extends K ? never: t] : T[t]
}
type SetOptional<T, K> = CommonFun<T, K> & Unequal<T, K> 

不过这样虽然思路很清晰,但是看起来写了好多。事实上,可以使用PartialPick来代替CommonFun, 然后用Omit代替Unequal

只需要像下面的一句就可以解决,是不是缩减了很多代码

type SetOptional<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K> 

当然这些都是要基于对typescript内置类型比较熟悉的情况下,最好的方式就是多多去使用。就像当初最开始学习javascript时,对于Math.floorsplice这些方法也是多使用才能够熟悉起来。

当然上面的这些例子可能会觉得实用性不大,那么将数组类型扁平化总应该算有点实用性吧

[ number, [string], [ boolean, [ void, string ] ] ] 转换成 number | string | boolean | void 扁平化联合

这种例子很容易就会想到递归函数

解决方案:首先使用infer X[]将当前数组中的元素进行判断,如果不是数组则直接返回,否则元素重新进入SetOptional判断循环。

type ArrType = [ number, [string], [ boolean, [ void, string ] ] ]

type SetOptional<T> = T extends (infer X)[] ? SetOptional<X> : T
// string | number | boolean | void
type Res = SetOptional<ArrType>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从0开始的 TypeScriptの十四:内置工具类型 的相关文章

  • 这段代码有什么问题。如果用户选择或不选择复选框,为什么它仍然显示 MsgBox? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 无论我是否选择复选框 它仍然会给出
  • 如何对 NestJS 中的控制器应用防护进行单元测试?

    我在 NestJS 中配置了一个控制器 我想检查是否设置了适当的防护 有人有如何完成此操作的示例吗 这个 删节的 示例作为一个应用程序可以正常工作 所以我只是在测试指导之后 您会注意到在用户测试中有一些我正在调用的测试Reflect get
  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge
  • ES6 类文字中的 IIFE

    在 ES5 中我们都可以这样做 myClass prototype myMethod function return function 我可以对 ES6 类文字执行同样的操作吗 不 至少现在还没有 ES6 类仅支持声明方法 因此任何不直接为
  • 刷新页面后保留输入值

    我有一个带有输入字段的表单 该输入包含一个下拉菜单 从数据库中读取信息 如果用户输入值 并且当他到达下拉菜单时 他没有找到他想要的内容 他会转到另一个页面将此信息添加到下拉菜单 然后转到第一页继续输入信息 如果他转到另一个页面向下拉菜单添加
  • jQuery数据表设置列设计和成功回调中的值

    我为我的数据表编写了以下代码 它用我的数据库中的内容填充表 如下所示 if datatable null datatable destroy datatable tableProducts DataTable pageLength 50 b
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • 我可以用一个简单的函数制作一个迭代器吗? (没有生成器或 Symbol.iterator)

    我一直在尝试使用普通函数创建一个迭代器 而不使用生成器或使用Symbol iterator用于学术目的的协议 为此 我创建了一个函数 它返回一个带有next参数 但尝试将其作为iterable的论证for of循环会产生不需要的结果 这是到
  • 光标:IE 8 和 9 中的自动行为

    我想要的是为整个正文标记指定cursor pointer 这样页面的背景是可点击的 但我也希望页面的其余部分像以前一样工作 所以我尝试为div设置cursor auto 其中包含这一页 在 FF Chrome 和 safari 中 它工作得
  • “move(-1)”作为 AngularJS 表达式有什么问题吗?

    我收到此错误 parse ueoe Unexpected end of expression move 从这段代码来看
  • 在each() 和forEach() 中使用break 和 continue

    如果我们不能使用 break 和 continue 关键字 我不确定我是否理解函数式循环 映射的价值 我可以做这个 collections users models forEach function item index can t use
  • 处理时区转换的 JavaScript 库

    是否有一个 JavaScript 库可以处理时区转换 并考虑 DST 规则和此类内容 我知道有类似的问题 但我见过的问题似乎都没有真正适合我的问题的答案 我想在时区 A 创建一个日期并能够对其进行操作 添加天数 小时等 然后将其转换为另一个
  • 在 Windows 上静默安装 Qt55 Enterprise

    编辑 在 Qt 支持的帮助下 我已经解决了如何自动化 Qt 企业安装程序的这两个部分 下面是脚本调用 我正在尝试在 Windows 8 1 和 Windows 10 上静默安装 Qt 5 5 1 Enterprise 使用 script 开
  • jQuery 模板插件:如何创建双向绑定?

    我开始使用 jQuery 模板插件 微软创建的 但现在我面临这个问题 模板用于绑定到对象数组的一堆表单 当我更改其中一个表单上的某些内容时 我希望更新绑定的对象 但我不知道如何自动执行该操作 这是一个简单的例子 现实生活中的模板和对象要复杂
  • 如果突出显示一个单词并且用户单击连接单词,则同时突出显示两个单词

    我最近发布了一个question https stackoverflow com questions 34963610 how can i highlight a word term quicker and smarter寻求一种更智能地突
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • IE9 中的无效字符 DOM 异常

    以下这段 JS 曾经在 IE8 中工作 现在在 IE9 中失败 document createElement 我收到以下异常 SCRIPT5022 DOM 异常 INVALID CHARACTER ERR 5 上面这段代码是不是不符合标准呢
  • 如何使 4.X Typescript 项目与旧版本的 Typescript(如 3.X)兼容?

    如何使基于 TS 4 X 构建的软件包与 3 X 兼容 例如 如果我有较新的版本 则使用新功能 否则使用any or unknown或旧版本支持的任何内容 有没有可能使用指令 https www typescriptlang org doc
  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题
  • 检测 html 选择框上的编程更改

    有没有办法让 HTML 选择元素在每次以编程方式更改其选择时调用函数 当使用 JavaScript 修改选择框中的当前选择时 IE 和 FF 都不会触发 onchange 此外 更改选择的 js 函数是框架的一部分 因此我无法更改它以在结束

随机推荐

  • Mini AHRS 姿态解算说明

    本文旨在讲解以下内容 1 加速度 2 陀螺仪 3 磁力计 0 序言 一直想写篇文章关于姿态解算原理的 使用尽量通俗的语句说明如何从加速度计和陀螺仪的数据 融合得到载体的姿态角 无奈自己的水平有限 一直搁置 淡泊以明志 宁静以致远 人总是要逼
  • 计算机网络实验报告 静态路由的配置

    实验名称 静态路由的配置 一 实验目的 1 掌握路由器的配置 2 学会配置静态路由 3 实现静态路由的不同网络间的互通 二 实验内容 1 搭建拓扑图 2 网络拓扑节点IP配置 3 静态路由配置实现不同网络的通信 三 实验环境 GNS3是一款
  • 七大排序之归并排序

    文章目录 什么是归并排序 归并排序代码 归并排序相关习题 148 排序链表 剑指 Offer 51 数组中的逆序对 总结 什么是归并排序 归并排序的思想 将原数组不断拆分 一直拆到每个子数组只有一个元素时 第一阶段结束 然后开始 并 将相邻
  • Databend 开源周报第 110 期

    Databend 是一款现代云数仓 专为弹性和高效设计 为您的大规模分析需求保驾护航 自由且开源 即刻体验云服务 https app databend cn What s On In Databend 探索 Databend 本周新进展 遇
  • 踩坑日记(一)

    1 Vue 错误 Uncaught TypeError Object is not a function at eval vue router esm bundler js vue router版本太高了 需降低版本 降为 3 5 3 可参
  • VUE3 之 条件渲染

    目录 1 概述 2 条件渲染 3 综述 4 个人公众号 1 概述 老话说的好 要锻炼逆向思维 人取我弃 人弃我取 言归正传 今天我们来聊聊 VUE3 的条件渲染 2 条件渲染 2 1 v if div div
  • 全手工杂拌面——韩国才有的中华料理 冬至餐桌上的25道家常手工主食

    这是一道韩国特有的中餐 全手工海鲜杂拌面 面条以鸡蛋 面粉和成 不加一滴水 汤则由鸡骨头经过数小时熬制而成的汤底制作而成 从汤到面一律手工打造 彻底抛弃了现成的面条 速食的鸡汤 符合眼下反对快餐食品 提倡有个性及营养均衡的传统美食的慢食文化
  • MySQL-高级处理

    第五章 SQL高级处理 5 1 窗口函数 5 1 1 窗口函数概念及基本的使用方法 窗口函数也称为OLAP函数 OLAP 是 OnLine AnalyticalProcessing 的简称 意思是对数据库数据进行实时分析处理 为了便于理解
  • QT--收发数据代码

    1 pro QT core gui QT serialport QT widgets QT core 2 h ifndef JTLTESTTOOL H define JTLTESTTOOL H include
  • 【半监督学习】2、Soft Teacher

    文章目录 一 背景 二 方法 2 1 End to End Pseudo Labeling Framework 2 2 Soft teacher 2 3 Box Jittering 三 实验 论文 End to End Semi Super
  • python3+robotframework3+selenium3分层设计和截图及注意事项

    再说一下目前的主要环境信息和版本 操作系统 win10 64位 python版本 3 9 0 RIDE版本 v2 0b2 dev1 robotframework seleniumlibrary 3 141 0 selenium 3 141
  • C语言的数据类型大全,整型数据在内存中的存储方式

    一 数据类型 通过长时间的学习C语言以及代码的编写 我掌握了很多很多的数据类型 下面就给大家罗列一下 1 内置数据类型 char 字符数据类型 所占内存空间1字节 short 短整型 所占内存空间2字节 int 整形 所占内存空间4字节
  • java 超市购物程序设计

    编写一个超市购物程序 在一家超市有以下商品 牙刷 8 8元 毛巾 10 0元 水杯 18 8元 苹果 12 5元 香蕉 15 5元 用户通过输入商品序列号进行商品购买 用户输入购买数量后计算所需花费的钱 一次购买后 按Y继续购买 N购买结束
  • shell脚本学习笔记 (sed的高级用法----模式空间和保持空间)

    前段时间在学习shell脚本 上次有提到sed的模式空间和保持空间概念 但是一直没有研究好 这两天研究了一下 所以将它发出来 不是很全面 仅仅供大家参考一下 保持空间sed在正常情况下 将处理的行读入模式空间 脚本中的 sed comman
  • ES词典热加载-通过修改ik分词器源码实现热加载自定义词典

    逻辑 自定义词典的数据从mysql加载 只需要重启一次ES即可 后续热加载 实现 在自定义词典的init方法中实现每隔一定时间读取mysql并写入自定义词典的逻辑
  • 【微信小程序】小程序之滚动页面的某个元素位置

    这种效果基本上都是在文章详情页面才会出现 用于点击按钮页面滚动到文章的评论位置 但是不排除可以用于别的功能 首先我们需要用到的是在小程序里面获取某一个元素的位置高度 var that this var flag that data flag
  • java基础之 IO 流(InputStream/OutputStream)

    基流 上图中有句话写错了 应该是 字节流的根类 文件输出 入字节流 代码示例 心得 读写文件流 关心 读的时候读多少 写的时候写多少 它没有限制一次只能读 写多少 文件流的创建 到 文件流的关闭 为一个周期 package IOTest i
  • 肝2022世界杯,怒写企业级镜像私仓Docker+Harbor实践

    2022 12 09 揭幕2022卡塔尔世界杯4强角逐的第一天 越来越精彩了 同时记录程序猿的成长 1 背景 由于期望搭建一个企业级CICD的环境 开始尝试常规的gitlab jenkins k8s docker harbor spring
  • 997. 找到小镇的法官

    题目描述 小镇里有 n 个人 按从 1 到 n 的顺序编号 传言称 这些人中有一个暗地里是小镇法官 如果小镇法官真的存在 那么 小镇法官不会信任任何人 每个人 除了小镇法官 都信任这位小镇法官 只有一个人同时满足属性 1 和属性 2 给你一
  • 从0开始的 TypeScriptの十四:内置工具类型

    序 在之前的 从0开始的TypeScript 十三 中 已经对typescript的工具类型中的关键字infer extends keyof typeof in这些有所了解了 那么接下来为了使用更加方便 可以对typescript中内置的工