11. TypeScript 工具类型

TypeScript 提供了一系列内置的“工具类型”(Utility Types),它们是对已有类型进行变换的便捷方式。通过这些工具类型,开发者可以更灵活、可维护地进行类型设计,避免重复定义类型逻辑。

工具类型的作用主要有:

  • 快速基于已有类型创建新类型;
  • 控制属性的可选性、只读性、选择性;
  • 提升代码可读性与复用性。

下面,我们将详细讲解 TypeScript 提供的常用工具类型及其应用示例。

一、Partial<Type>

作用:将某个类型的所有属性变为可选。

语法

Partial<T>

示例

interface User {Id: string;email: string;
}type PartialUser = Partial<User>;const partialUser: PartialUser = { Id: '123' };console.log(partialUser); // 输出: { Id: '123' }

说明:

  • PartialUser 中的所有属性都是可选的。
  • partialUser 只传入了 Id 属性也合法。

二、Required<Type>

作用:将某个类型中的所有属性变为必填。

语法

Required<T>

示例

interface User {name?: string;age?: number;
}type RequiredUser = Required<User>;const requiredUser: RequiredUser = { name: 'John', age: 20 };console.log(requiredUser); // 输出: { name: 'John', age: 20 }

说明:

  • RequiredUser 中的所有属性都变成了必填。
  • 缺少任何属性都会报错。

三、Readonly<Type>

作用:将类型中所有属性标记为只读,禁止修改。

语法

Readonly<T>

示例

interface User {name: string;age: number;
}type ReadonlyUser = Readonly<User>;const readonlyUser: ReadonlyUser = { name: 'John', age: 30 };readonlyUser.name = 'Jane'; 
// 报错:Cannot assign to 'name' because it is a read-only property.

说明:

  • ReadonlyUser 的属性不能被修改。
  • 用于实现对象的不可变性。

四、Pick<Type, Keys>

作用:从类型 T 中挑选出一组指定的属性,构成新类型。

语法

Pick<T, K>

示例

interface User {name: string;age: number;email: string;
}type UserSummary = Pick<User, 'name' | 'email'>;const userSummary: UserSummary = { name: 'ram', email: 'ram@example.com' };console.log(userSummary); // 输出: { name: 'ram', email: 'ram@example.com' }

说明:

  • 只选择了 User 中的 nameemail 属性。

五、Parameters<Type>

作用:提取函数类型中所有参数类型,组成元组类型。

语法

Parameters<T>

示例

function sum(a: number, b: number): number {return a + b;
}type SumParams = Parameters<typeof sum>;  // [number, number]const params: SumParams = [1, 2];console.log(params); // 输出: [1, 2]

说明:

  • SumParams 是一个元组类型 [number, number]
  • 可以动态地从函数中提取参数类型进行复用。

六、Record<Keys, Type>

作用:构建一个具有固定 key 的对象类型,所有 key 对应的值都是指定的类型。

语法

Record<K, T>

示例

type Fruit = 'apple' | 'banana' | 'orange';type Inventory = Record<Fruit, number>;const inventory: Inventory = {apple: 10,banana: 15,orange: 20
};console.log(inventory); 
// 输出: { apple: 10, banana: 15, orange: 20 }

说明:

  • Inventory 是一个 key 为水果名,value 为数量的对象。
  • 保证所有 key 都存在,且值为 number 类型。

七、Exclude<Type, ExcludedUnion>

作用:从联合类型 T 中排除掉属于 U 的部分。

语法

Exclude<T, U>

示例

type Status = 'pending' | 'approved' | 'rejected';type NonRejectedStatus = Exclude<Status, 'rejected'>;const status: NonRejectedStatus = 'approved';console.log(status); // 输出: approved

说明:

  • NonRejectedStatus 只包含 'pending''approved',排除了 'rejected'
  • 如果赋值为 'rejected' 会报错。

八、使用建议和最佳实践

  1. 理解每种工具类型的用途:如 Partial 用于表单、更新操作,Readonly 用于不可变数据。
  2. 保持类型一致性:统一使用工具类型能让代码更具可读性。
  3. 合理组合工具类型:可以 PickReadonly,但避免过度嵌套造成难以维护。

九、总结

TypeScript 的工具类型为我们提供了一套强大且灵活的类型变换机制,可以让类型定义更加精简、强大而不失可读性。无论是在业务模型构建、表单设计还是 API 数据转换中,它们都能大幅提升代码的开发效率与维护质量。

推荐使用场景包括

  • 接口部分字段可选(使用 Partial
  • 创建只读数据模型(使用 Readonly
  • 提取函数参数、返回值类型(使用 Parameters, ReturnType
  • 对接口类型取子集(使用 Pick, Omit
  • 创建特定 key 的对象(使用 Record

充分掌握这些工具类型,是成为 TypeScript 高效开发者的必经之路。

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

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

相关文章

Kafka性能调优全攻略:从JVM参数到系统优化

前言 在大数据处理领域&#xff0c;Kafka以其高吞吐、高并发的特性成为消息队列的首选。然而&#xff0c;随着业务规模的扩大和数据量的激增&#xff0c;若配置不当&#xff0c;Kafka的性能和稳定性会受到严重影响。其中&#xff0c;JVM参数的调整是优化Kafka性能的关键一环&a…

HarmonyOS 5 NPU支持哪些AI框架?

以下是HarmonyOS 5 NPU支持的AI框架及适配方案&#xff0c;结合关键技术和实测数据&#xff1a; 一、原生支持框架 MindSpore Lite‌ ‌核心特性‌&#xff1a; 原生适配昇腾达芬奇架构&#xff0c;支持INT8/FP16混合量化自动算子融合优化&#xff08;实测推理速度提升3.2倍…

鸿蒙uvc预览

简单查看流程&#xff0c;如有错误请指出。 CameraNativePreview.ets--> 这里开始进入uvc_camera库 (CameraDevice.ets/CameraManager.ets) --> CameraUtils.ets--> -->CameraNativeMethods(index.d.ts文件&#xff0c;路径: uvc_camera\src\main\cpp\types\…

PHP的打印语句

文章目录 环境总结打印语句换行符括号数组&#xff08;对象&#xff09;和字符串之间的相互转换 打印语句echoprint括号print_rvar_dump 数组&#xff08;对象&#xff09;和字符串之间的转换json_encodejson_decodeimplodeexplode 环境 PHP 8.4.5 总结 如果不想看详细介绍&…

功率MOSFET的SOA曲线

功率MOSFET的SOA曲线 SOA区指的是MOSFET的安全工作区&#xff0c;英文表示为Safe Operating Area&#xff0c;是指MOSFET&#xff08;金属氧化物半导体场效应晶体管&#xff09;的安全操作范围。在线性模式运行的情况下&#xff0c;SOA特别有用。但开关模式下&#xff0c;一般…

Stacking集成BP神经网络/RF/SVM和遗传算法的煤炭配比优化

一、煤炭配比优化的问题本质与技术路线 煤炭配比需同时满足煤质指标&#xff08;灰分、挥发分、热值&#xff09;、燃烧特性&#xff08;着火温度、燃尽指数&#xff09;、经济成本等多目标优化。传统方法依赖经验公式&#xff0c;难以处理非线性关系&#xff1a; 核心难点&a…

Unity Shader开发-着色器变体(2)-定义着色器变体

一.定义着色器变体 定义一个着色器变体&#xff08;Shader Variant&#xff09;从概念和实现上讲&#xff0c;主要包括以下几个核心部分 1.使用预编译指令来声明变体关键字 关键字是驱动变体生成的“开关”。它们是简单的字符串标识符&#xff0c;用于在 Shader 代码中标记不…

sql server耗时模拟

REATE PROCEDURE SimulateDelay AS BEGINPRINT 开始耗时操作...;-- 模拟等待 5 秒WAITFOR DELAY 00:00:05;PRINT 耗时操作完成。; END 方法二&#xff1a;使用忙循环(不推荐&#xff0c;CPU 占用高) CREATE PROCEDURE SimulateBusyLoop AS BEGINDECLARE start DATETIME GETDAT…

Zookeeper的典型应用场景?

大家好&#xff0c;我是锋哥。今天分享关于【Zookeeper的典型应用场景?】面试题。希望对大家有帮助&#xff1b; Zookeeper的典型应用场景? 超硬核AI学习资料&#xff0c;现在永久免费了&#xff01; Zookeeper 是一个分布式协调服务&#xff0c;广泛应用于需要高可用性、分…

STM32F103_LL库+寄存器学习笔记12.3 - 串口DMA高效收发实战3:支持多实例化的版本

导言 《STM32F103_LL库寄存器学习笔记12.2 - 串口DMA高效收发实战2&#xff1a;进一步提高串口接收的效率》基于上一个版本&#xff0c;进一步提升代码的模块化水平&#xff0c;支持多实例化。 如上所示&#xff0c;收发大量的数据&#xff0c;没有丢包。 项目地址&#xff1a…

跨平台的重构版Notepad++文本编辑器

跨平台 Notepad 替代方案 Notepad 是 Windows 平台上的流行文本编辑器&#xff0c;但其原生版本不支持跨平台。以下是功能相似且支持多平台的替代工具&#xff1a; Notepadqq&#xff08;Linux/macOS/Windows&#xff09; Notepadqq 是 Notepad 的开源跨平台版本&#xff0c…

意法STM32F103C8T6 单片机ARM Cortex-M3 国民MCU 电机控制到物联网专用

STM32F103C8T6 单片机全面解析 1. 产品定位 STM32F103C8T6 是意法半导体&#xff08;ST&#xff09;推出的 经典ARM Cortex-M3内核单片机&#xff0c;采用 LQFP48封装&#xff0c;以 高性能、丰富外设和超高性价比 成为嵌入式开发领域的"国民MCU"。 2. 核心功能特…

Sui 技术如何助力 Claynosaurz 成功推出 Popkins NFT

像 Claynosaurz 这样的品牌利用 Sui 推动链上创新的边界&#xff0c;展示了 Web3 如何结合互动娱乐并带来独特全新的体验。Claynosaurz 最近在 Sui 上推出的 Popkins NFT 系列及其大型抽奖活动&#xff0c;不仅在社区参与度上取得了成功&#xff0c;也有力地展示了 Sui 独特的技…

OpenCV CUDA模块设备层-----反正弦运算函数asin()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 对一个 uchar 类型的像素值&#xff08;范围 [0, 255]&#xff09;&#xff0c;先归一化到浮点范围 [0.0, 1.0]&#xff0c;然后计算其反正弦值 …

PixiJS 中 HTMLText 富文本渲染问题探究与优化思考​

起因 在使用 PixiJS 进行富文本渲染开发过程中&#xff0c;遭遇 HTMLText 组件处理中文字体加载时出现显著卡顿现象。针对此问题&#xff0c;在开源社区提交 issue 并附上相关技术细节与运行表现&#xff0c;期望获得解决方案。 提issues 从 issue 反馈内容来看&#xff0c;项目…

五、Redis的IO模型

简介 在谈及Redis为什么快的时候&#xff0c;很多人都只能回答redis是基于内存&#xff0c;所以快。但他们往往不知道&#xff0c;决定redis快的因素&#xff0c;还有它的IO模型-Reactor模型。谈及Redis的IO模型之前&#xff0c;先补充一下IO模型的基础知识。 IO模型演化 1.堵塞…

Cesium、ThreeWebGL详解(二)渲染引擎向GPU传数据、性能优化、引擎对比

下面从 API 定位、坐标体系、性能表现、面试常问点几个维度详细对比 Cesium、Three.js 与原生 WebGL 的绘制差异。 &#x1f9ed; 1. API 定位与典型应用 Cesium 聚焦全地球 GIS 场景&#xff0c;支持地形、影像、时空动态等地理信息功能&#xff0c;是专业级地图应用首选。 T…

单点登录(SSO)系统

设计一个 Java 单点登录&#xff08;SSO&#xff09;系统需要解决跨系统认证和会话共享问题。以下是核心设计和实现方案&#xff0c;包含关键组件和代码示例&#xff1a; 一、核心概念 认证中心 (Auth Center)&#xff1a;中央身份验证服务令牌 (Token)&#xff1a;用户身份凭…

《信息技术》科技核心期刊推荐

【科研必看】《信息技术》——科技核心期刊&#xff0c;助力你发表高影响力论文&#xff01; 如果你是一位科研工作者、学者或者在校学生&#xff0c;正在为发表论文而努力&#xff0c;那么《信息技术》期刊无疑是你不可错过的选择&#xff01;这本期刊以其卓越的学术影响力&am…

界面组件DevExpress WPF中文教程:Grid - 如何遍历节点?

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…