TypeScript类型体操<hard>--ToOptional

前言

Typescript类型体操专栏很久没更新了

一是最近在主更vite技术揭秘、还原与实战,虽然内容部分早就写完了,但每次都要手动的一个博客一个博客的cv甚是麻烦,搞得人失去了原本的热情

二也是没啥动力,光看不点赞的😂

不过今天突然注意到,即使这么久都不更新了,但是订阅的人数还是在不断增加的,想来大家还是对ts有兴趣的

既如此

那就...

那就......

再写一篇?

嗯......

为了保证自己能坚持更下去,我觉得将之前吹过的牛逼(每周更新1-2篇)收回,并变更为每月更新1-3篇,这样才更力所能及些🤔

进度

前边几篇文章我们一共实现了39 个工具类型,按照本专栏的规划,还差60个...

本节我们继续学习一个新的工具类型

提示

对于语法层面的知识点本系列(类型体操开头的标题)不会展开说明哈,可以自行搜索学习其他大佬的优质文章或者等我后续更新补充

题目

将对象中的key转为可选,可传参数二指定可变范围

示例如下

typescript 复制代码
ToOptional<{ name: string , age: number }>
//=> { name?: string; age?: number }

ToOptional<{ name: string, age: number }, 'name'>
//=> { name?: string ; age: number  }

实现

首先,创建一个自定义类型ToOptional,暂定两个泛型参数TU

bash 复制代码
type ToOptional<T,U>

接着为参数T和U做类型限定,显然T应当是对象类型,而U则依附于T,它的取值一定是Ukey组成的联合类型的子类型

r 复制代码
type ToOptional<T extends {},U extends keyof T = keyof T> 

从前文示例不难看出,对于key的处理可以分成两部分,一部分是需要变成可选的,即参数U的部分

ini 复制代码
type Obj1 = {
  [K in U]?:T[K]
}

另外一部分则是原封不动的

ini 复制代码
type Obj2 = {
  [K in Exclude<keyof T,U>]:T[K]
}

这二者的交集似乎刚刚好就是原类型T

复制代码
Obj1 & Obj2

为了验证这一点,我们随便写一个例子来验证下

假设T如下

css 复制代码
type T = {
  name?:string;
  age:number;
  sex:'man'
}

Obj1如下

ini 复制代码
type Obj1 = {
  name?:string;
}

Obj2如下

css 复制代码
type Obj2 = {
  age:number;
  sex:'man'
}

Obj1 & Obj2是否等于T

故,完整代码及使用示例如下

下期预告

Square

  • 功能

获取平方数

  • 使用示例
go 复制代码
type case = Square<4> // 16

如果本文对您有用,希望能得到您的点赞和收藏

订阅专栏 ,每更新1-3篇类型体操,等你哟😎

相关推荐
VT.馒头2 小时前
【力扣】2625. 扁平化嵌套数组
前端·javascript·算法·leetcode·职场和发展·typescript
San30.4 小时前
从零构建坚固的前端堡垒:TypeScript 与 React 实战深度指南
前端·react.js·typescript
VT.馒头6 小时前
【力扣】2694. 事件发射器
前端·javascript·算法·leetcode·职场和发展·typescript
止观止8 小时前
像三元表达式一样写类型?深入理解 TS 条件类型与 `infer` 推断
前端·typescript
We་ct8 小时前
LeetCode 73. 矩阵置零:原地算法实现与优化解析
前端·算法·leetcode·矩阵·typescript
We་ct9 小时前
LeetCode 48. 旋转图像:原地旋转最优解法
前端·算法·leetcode·typescript
We་ct1 天前
LeetCode 54. 螺旋矩阵:两种解法吃透顺时针遍历逻辑
前端·算法·leetcode·矩阵·typescript
We་ct1 天前
LeetCode 36. 有效的数独:Set实现哈希表最优解
前端·算法·leetcode·typescript·散列表
Async Cipher2 天前
TypeScript 的用法
前端·typescript
We་ct2 天前
LeetCode 30. 串联所有单词的子串:从暴力到高效,滑动窗口优化详解
前端·算法·leetcode·typescript