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

相关推荐
晓杰'18 小时前
从0到1实现 Balatro 游戏后端(2):NestJS框架搭建与项目结构设计
后端·websocket·typescript·node.js·游戏开发·项目实战·nestjs
VillenK1 天前
版本依赖问题:vite-plugin-dts@3.1.0 与 jiti 的兼容性
前端·typescript·vite
轻口味1 天前
AI 时代全栈开发破局:TypeScript 生态实战,从入门到部署一站式通关
前端·mongodb·docker·ai·typescript·react·next.js
Czzzzlq1 天前
【无标题】
typescript·node.js·ai编程
mobº1 天前
Vue3 +TypeScript 项目总结
前端·javascript·typescript
用户056694948312 天前
🔥 我把 axios 接口封装,玩出了 NestJS 的感觉
typescript
索西引擎2 天前
【理论】TypeScript 函数重载:从 Vue 3 defineEmits 说起的类型安全实践
前端·typescript
漫游的渔夫2 天前
从 if-else 乱麻到状态机:前端开发者该怎么理解多 Agent 协作?
前端·人工智能·typescript
matrixmind82 天前
sindresorhustype-fest:TypeScript 工具类型集合
前端·javascript·其他·typescript
guangzan3 天前
DeepSeek-Lane:在 Cursor 内使用 DeepSeek V4 模型
typescript