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

相关推荐
kyriewen1 天前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
妙码生花2 天前
现代前端的极致性能 icon 加载方案(死磕成功版)
前端·vue.js·typescript
MonkeyKing2 天前
鸿蒙ArkTS深度剖析:ArkTS与TS/JS核心差异、静态强类型实战优势
typescript·harmonyos
Momo__4 天前
TypeScript satisfies 操作符——比 as 更安全的类型守门员
前端·typescript
Awu12275 天前
⚡从零开发 Agent CLI(四):给 CLI 装上"LLM 引擎"
typescript·ai编程·claude
假如让我当三天老蒯6 天前
TypeScript 继续学习(学习用)
前端·面试·typescript
糖拌西瓜皮7 天前
Node.js工程化实践:包管理、TypeScript配置与代码质量
typescript·node.js
Bolt8 天前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
Flynt9 天前
装上TypeScript 7.0 RC之后,最让我意外不是10倍提速
typescript·visual studio code
疯狂SQL9 天前
手写高性能在线 JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
typescript·json·next.js·web worker·前端性能优化·esbuild·源码实战