2025最全TS手写题之partial/Omit/Pick/Exclude/Readonly/Required

随着 TS 在工作中使用的越来越广泛,面试的时候面试官也都会加上一两个 TS 的问题来了解候选人对于 TS 的熟悉程度,其中就有不少手写题目,比如笔者在字节的一次二面,面试官就问到了我如何实现一个 Pick,在小红书的一面,面试官问到了我如何实现一个 Omit。

接下来,让我们一起看看有哪些常见 TS 手写题吧。

手写 pick

Pick<T, K> ==> 从类型 T 中选出属性 K,构造成一个新的类型。

前置知识:type: 作用就是给类型起一个新名字,支持基本类型联合类型、元组及其他任何你需要的手写类型,常用于联合类型,与接口一样,用来描述对象或函数的类型。

手写实现:

type Pick<T, K extends keyof T> = {[P in K]: T[P]
}

使用示范:

// 从 User 中挑出 stature 来定义类型
interface User {stature: numberage: number
}
const people: Pick<User, "stature"> = {stature: 185
}

手写 Exclude

Exclude 是 TypeScript 的一种类型操作符,用于从类型 T 中排除掉指定的类型 K。其定义为:

type Exclude<T, K> = T extends K ? never : T;

这个定义中,使用了 TypeScript 的条件类型,它主要的义务是允许我们在类型系统中进行运算和推断。

具体来说,在这个条件类型中,我们首先声明了一个泛型类型参数 TK。然后,使用了 extends 关键字将 TK 进行对比。如果 TK 的子类型,则返回 never 类型;否则返回 T 类型。

为什么要返回 never 呢?因为 never 代表的是永远不可能出现的类型,相当于一个空集合。这样,在使用 Exclude 操作符时,我们就可以将 T 中与 K 相同的类型排除掉,从而得到一个新的类型。

例如,假设我们有以下两个类型:

type A = "a" | "b" | "c" | "d";
type B = "b" | "d" | "e" | "f";

我们可以使用 Exclude 操作符将 B 中包含的类型从 A 中排除掉,得到一个新的类型 C

type C = Exclude<A, B>; // "a" | "c"

因为 A 中包含了四个类型,而 B 中包含了 "b""d",所以将这两个类型从 A 中排除后,剩余的类型就是 "a""c"。因此,新的类型 C 就是 "a" 或者 "c"

手写 partial

Partial 是 TypeScript 内置的一个类型操作符,它用于将某个类型中每个属性设置为可选属性,这表示这些属性的值可以是 undefined 或者省略。

下面是 Partial 的代码:

type Partial<T> = {[P in keyof T]?: T[P];
};

这个定义使用了 TypeScript 中的映射类型(Mapped Types)和索引访问类型(Index Access Types)。

首先,声明一个泛型类型 T 作为待操作的类型。然后,使用了映射类型语法,声明一个新类型,其属性名为 P,该属性名必须是 T 的属性名之一,属性值为该属性名在 T 类型中对应的类型。并且使用 ? 符号来将所有属性设置为可选属性。

该类型操作符的作用是让某个类型中的每个属性都变成可选属性,从而灵活地处理类型的使用,特别是在一些属性不是必需的场景下。

上面的示例中,我们先声明了一个 Person 接口,然后使用 Partial 操作符将其转化为可选类型 PartialPerson,接着创建三个可选类型的变量 person1person2person3。在 person1 中,只设置了 name 属性,而 age 属性是可选的,其值默认为 undefined;在 person2 中,没有设置任何属性,两个属性都是可选的,其值默认为 undefined;在 person3 中,设置了 nameage 两个必选属性,其值和 Person 类型一致。

手写 Omit

Omit 是 TypeScript 的一种类型操作符,用于从类型 T 中删去指定的属性 K。其定义为:

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

这个定义中,使用了 TypeScript 的类型推导机制和 Exclude 操作符。

首先,我们声明了两个泛型类型参数 TK,其中 T 表示要操作的类型,K 表示要删去的属性名。

然后,使用了 keyof T 操作符,获取了 T 类型的所有属性名组成的联合类型。接着,使用 Exclude 操作符将 K 从这个联合类型中排除掉,得到一个新的属性名联合类型。最后,使用 Pick 操作符从 T 类型中选取删去了属性 K 后的属性集合。

例如,假设我们有以下类型:

interface Person {name: string;age: number;address: {city: string;street: string;};
}type PersonNameAndAge = Omit<Person, "address">;

PersonNameAndAge 将会是一个新的类型,它只包含 Person 中的 nameage 两个属性。可以通过以下方式检查它的类型:

const person: PersonNameAndAge = { name: "Alice", age: 30 };
person.name = "Bob"; // 可以修改
person.address = { city: "Shanghai", street: "Nanjing Road" }; // 报错,address 属性不存在

因此,Omit 操作符可以方便地帮助我们从一个类型中删去指定的属性,得到一个新的类型。

手写 Readonly

Readonly 是 TypeScript 内置的一个类型操作符,它用于将某个类型中每个属性设置为只读属性,这表示这些属性的值不能被修改。

下面是 Readonly 的代码:

type Readonly<T> = {readonly [P in keyof T]: T[P];
};

这个定义使用了 TypeScript 中的映射类型(Mapped Types)和索引访问类型(Index Access Types)。

首先,声明一个泛型类型 T 作为待操作的类型。然后,使用了映射类型语法,声明一个新类型,其属性名为 P,该属性名必须是 T 的属性名之一,属性值为该属性名在 T 类型中对应的类型。并且使用 readonly 关键字将属性设置为只读属性。

该类型操作符的作用是保护类型中的属性免于被错误的修改,特别是防止在多个地方引用该类型中的同一个属性时产生冲突。

以下是一个使用 Readonly 操作符的示例:

interface Person {name: string;age: number;
}type ReadonlyPerson = Readonly<Person>;let person: ReadonlyPerson = { name: "Alice", age: 30 };
person.name = "Bob"; // 报错,因为 name 是只读属性
person.age = 40; // 报错,因为 age 是只读属性
person = { name: "Carol", age: 50 }; // 可以修改整体属性值

上面的示例中,我们先声明了一个 Person 接口,然后使用 Readonly 操作符将其转化为只读类型 ReadonlyPerson,接着创建一个只读类型的变量 person,并赋初值为 { name: "Alice", age: 30 }。由于 ReadonlyPerson 中的每个属性都是只读属性,所以我们不能修改 person 中的任何属性。如果要修改整个数据对象,我们需要分配一个新对象来覆盖 person

手写 Required

Required 是 TypeScript 内置的一个类型操作符,它用于将某个类型的所有可选属性都转换为必选属性。

下面是 Required 的代码:

type Required<T> = {[P in keyof T]-?: T[P];
};

这个定义使用了 TypeScript 中的映射类型(Mapped Types)和索引访问类型(Index Access Types)。

首先,声明一个泛型类型 T 作为待操作的类型。然后,使用了映射类型语法,声明一个新类型,其属性名为 P,该属性名必须是 T 的属性名之一,属性值为该属性名在 T 类型中对应的类型。并在属性名前使用 -? 符号来将所有属性设置为必选属性。

该类型操作符的作用是保证某个类型中的每个属性都必须有值,从而避免在使用该类型的地方出现意料之外的错误或者异常情况。

下面是一个使用 Required 操作符的示例:

interface Person {name?: string;age?: number;
}type RequiredPerson = Required<Person>;let person: RequiredPerson = { name: "Alice", age: 30 };
person.name = "Carol"; // 正常
person.age = 50; // 正常
person = { }; // 报错,因为 name 和 age 是必选属性

上面的示例中,我们先声明了一个 Person 接口,然后使用 Required 操作符将其转化为必选类型 RequiredPerson,接着创建一个必选类型的变量 person,并赋初值为 { name: "Alice", age: 30 }。由于 RequiredPerson 中的每个属性都是必选属性,所以我们必须设置 person 中的所有属性。如果我们忘记设置某个属性,或者设置错误的属性名,就会在编译期间发生错误,避免出现运行期错误。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/pingmian/84170.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…

LLMs之StructuredOutput:大模型结构化输出的简介、常用方案、前沿框架之详细攻略

LLMs之StructuredOutput&#xff1a;大模型结构化输出的简介、常用方案、前沿框架之详细攻略 目录 大模型结构化输出的简介 1、特点与难点 大模型结构化输出的常用方案及对比 1、前沿框架&#xff1a;vLLM 与 XGrammar 大模型结构化输出的案例应用 大模型结构化输出的简介…

Linux中shell流程控制语句

一、if条件控制 1.1 语法解读 单路决策 - 单分支if语句样式&#xff1a;if [ 条件 ]then指令fi特点&#xff1a;单一条件&#xff0c;只有一个输出 双路决策 - 双分支if语句样式&#xff1a;if [ 条件 ]then指令1else指令2fi特点&#xff1a;单一条件&#xff0c;两个输出 …

Python学习(8) ----- Python的类与对象

Python 中的类&#xff08;Class&#xff09;与对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心。我们可以通过“类是模板&#xff0c;对象是实例”来理解它们的关系。 &#x1f9f1; 一句话理解&#xff1a; 类就像“图纸”&#xff0c;对…

数据结构-文件

文件是性质相同的记录的集合。 记录是文件中存取的基本单位&#xff0c;数据项是文件可使用的最小单位。 操作系统研究的文件是一维的无结构连续字符序列&#xff0c;数据库中研究的文件是带有结构的记录集合。 文件在外存上的4种基本组织方式&#xff1a;顺序、索引、散列、链…

前端开发面试题总结-CSS篇

文章目录 CSS面试高频问答1、CSS选择器的优先级2、CSS3新特性3、如何垂直水平居中盒子4、什么是重绘和重排5、px/em/rem/vw有什么区别6、rem布局的原理7、如何设置比12px还要小的字体8、CSS中隐藏元素的方式有哪些 CSS面试高频问答 1、CSS选择器的优先级 2、CSS3新特性 3、如何…

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…

解决ubuntu20.04无法唤醒的问题的一种方法

解决ubuntu20.04无法唤醒的问题的一种方法 我更改了三个个地方&#xff0c;目前不清楚是哪个地方起的作用&#xff0c;也可能都起作用了 修改的第一个地方 步骤 1: 获取 Swap 分区的 UUID 首先&#xff0c;你需要知道你的 swap 分区的 UUID。你可以使用以下命令来查找它&am…

【大厂机试题解法笔记】矩阵匹配

题目 从一个 N * M&#xff08;N ≤ M&#xff09;的矩阵中选出 N 个数&#xff0c;任意两个数字不能在同一行或同一列&#xff0c;求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求&#xff1a;1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …

使用osqp求解简单二次规划问题

文章目录 一、问题描述二、数学推导1. 目标函数处理2. 约束条件处理 三、代码编写 一、问题描述 已知&#xff1a; m i n ( x 1 − 1 ) 2 ( x 2 − 2 ) 2 s . t . 0 ⩽ x 1 ⩽ 1.5 , 1 ⩽ x 2 ⩽ 2.5 min(x_1-1)^2(x_2-2)^2 \qquad s.t. \ \ 0 \leqslant x_1 \leqslant 1.5,…

pe文件结构(TLS)

TLS 什么是TLS? TLS是 Thread Local Storage 的缩写&#xff0c;线程局部存储。主要是为了解决多线程中变量同步的问题 如果需要要一个线程内部的各个函数调用都能访问&#xff0c;但其它线程不能访问的变量&#xff08;被称为static memory local to a thread 线程局部静态变…

Electron简介(附电子书学习资料)

一、什么是Electron&#xff1f; Electron 是一个由 GitHub 开发的 开源框架&#xff0c;允许开发者使用 Web技术&#xff08;HTML、CSS、JavaScript&#xff09; 构建跨平台的桌面应用程序&#xff08;Windows、macOS、Linux&#xff09;。它将 Chromium浏览器内核 和 Node.j…

如何使用DeepSeek帮助自己的工作?(Java开发)

如何使用DeepSeek帮助自己的工作&#xff1f; 作为Java开发者&#xff0c;你可以通过以下方式高效利用DeepSeek提升工作效率&#xff08;附具体操作示例&#xff09;&#xff1a; 一、日常编码加速 1. 代码生成与补全 // 输入需求描述&#xff1a; "生成SpringBoot分页…

Uniapp 二维码生成与解析完整教程

前言 使用Uniapp开发多平台应用&#xff0c;二维码生成采用uQRCode插件&#xff0c;非常nice&#x1f601;&#xff01; Coding 原理 使用canvas绘制 生成二维码数据 绘制到canvas上 使用 <uqrcoderef"uqrcodeRef"canvas-id"qrcode":value"qr…

Vue ⑤-自定义指令 || 插槽

自定义指令 自定义指令&#xff1a;自己定义的指令, 可以封装一些 dom 操作&#xff0c; 扩展额外功能。 全局注册 语法&#xff1a; Vue.directive(指令名, {"inserted" (el) {// 可以对 el 标签&#xff0c;扩展额外功能el.focus()} })局部注册 语法&#xff…

Java HttpClient实现简单网络爬虫

今天我将使用Java的HttpClient&#xff08;在Java 11及以上版本中内置&#xff09;来编写一个入门级的网络爬虫示例。 这个示例将演示如何发送HTTP GET请求&#xff0c;获取响应内容&#xff0c;并处理可能出现的异常。 以下是一个基于Java HttpClient&#xff08;Java 11&…

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…

Sonic EVM L1:沉睡的雄狮已苏醒

Sonic 链 , 是 Fantom 基金会升级后的Layer-1区块链&#xff0c;继承了 Fantom Opera 的高性能特性&#xff0c;并通过全面技术优化成为EVM兼容的高吞吐量公链。 官方网站 : https://www.soniclabs.com 一、Sonic 链概述 1. 为什么从 Fantom 更名为 Sonic Sonic 链是 Fant…

篮球杯软件赛国赛C/C++ 大学 B 组补题

3.gcd 模拟 map<pair<int,int>,int>m; void solve(){int n;cin>>n;forr(i,1,n){int ux,uy,vx,vy;cin>>ux>>uy>>vx>>vy;int dxvx-ux,dyvy-uy;if(dx!0&&dy!0){int gabs(__gcd(dx,dy));dx/g,dy/g;//dxdy中除去公共部分(gcd) 就…