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篇类型体操,等你哟😎

相关推荐
gis开发之家18 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
退休倒计时1 天前
【每日一题】LeetCode 131. 分割回文串 TypeScript
算法·leetcode·typescript
橘子星2 天前
在浏览器里跑大模型!用 WebGPU 零成本部署 DeepSeek-R1
前端·typescript
bonechips2 天前
React + WebGPU:在浏览器里跑一个 DeepSeek 推理模型
react.js·typescript
触底反弹2 天前
🔥 React 零基础入门(上):环境搭建 + JSX 深度解析
前端·react.js·typescript
谷哥的小弟3 天前
TypeScript对象类型
javascript·typescript
大家的林语冰3 天前
🫡 见证历史,TypeScript 7 重写成功,VS Code 原地起飞,GitHub 第一语言联手 Go 破而后立!
前端·javascript·typescript
濮水大叔5 天前
在 DTO 中使用 Form Layout 配置复杂表单,支持 Tabs/Groups/Sections
vue.js·typescript·node.js
用户0934077735146 天前
HarmonyOS WPS Open SDK 实践:用能力分层重构 OpenFileRequest
typescript·harmonyos
gis开发之家7 天前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3