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

相关推荐
狂炫一碗大米饭1 小时前
如何在 TypeScript 中使用类型保护
typescript
码农之王6 小时前
(一)TypeScript概述和环境搭建
前端·后端·typescript
蚂小蚁10 小时前
从DeepSeek翻车案例看TypeScript类型体操的深层挑战
typescript·deepseek·trae
在人间耕耘1 天前
鸿蒙应用开发:WebSocket 使用示例
typescript
在人间耕耘1 天前
uni-app/uniappx 中调用鸿蒙原生扫码能力的实践
typescript
海的诗篇_2 天前
前端开发面试题总结-JavaScript篇(二)
开发语言·前端·javascript·typescript
dancing9992 天前
cocos3.X的oops框架oops-plugin-excel-to-json改进兼容多表单导出功能
前端·javascript·typescript·游戏程序
yinke小琪2 天前
快速开始 - TypeScript 入门指南
前端·typescript
wordbaby2 天前
🎯 satisfies 关键字详解(TypeScript)
前端·typescript
SailingCoder3 天前
grafana-mcp-analyzer:基于 MCP 的轻量 AI 分析监控图表的运维神器!
运维·人工智能·typescript·node.js·grafana