搜索
首页web前端js教程TypeScript 实用程序类型:完整指南

TL;DR: TypeScript 实用程序类型是预先构建的函数,可以转换现有类型,使您的代码更干净且更易于维护。本文通过实际示例解释了基本实用程序类型,包括如何更新用户配置文件、管理配置和安全地过滤数据。

TypeScript Utility Types: A Complete Guide

TypeScript 是现代 Web 开发的基石,使开发人员能够编写更安全、更易于维护的代码。通过向 JavaScript 引入静态类型,TypeScript 有助于在编译时捕获错误。根据 2024 年 Stack Overflow 开发者调查,TypeScript 在开发者中最流行的脚本技术中排名第 5

TypeScript 令人惊叹的功能是其成功的主要原因。例如,实用程序类型可以帮助开发人员简化类型操作并减少样板代码。 TypeScript 2.1 中引入了实用程序类型,并且每个新版本中都添加了其他实用程序类型。

本文将详细讨论实用程序类型,以帮助您掌握 TypeScript。

了解 TypeScript 实用程序类型

实用程序类型是 TypeScript 中预定义的泛型类型,可以将现有类型转换为新的变体类型。它们可以被认为是类型级函数,将现有类型作为参数并根据某些转换规则返回新类型。

这在使用接口时特别有用,因为通常需要修改已存在类型的变体,而实际上不需要复制类型定义。

核心实用程序类型及其实际应用

TypeScript Utility Types: A Complete Guide

部分的

Partial 实用程序类型采用一个类型并使其所有属性都是可选的。当类型嵌套时,此实用程序类型特别有价值,因为它使属性递归地可选。

例如,假设您正在创建一个用户配置文件更新功能。在这种情况下,如果用户不想更新所有字段,则可以只使用 Partial 类型,只更新所需的字段。这在不需要所有字段的表单和 API 中非常方便。

请参考以下代码示例。

必需的

Required 实用程序类型构造一个类型,并将所提供类型的所有属性设置为 required。这对于确保在将对象保存到数据库之前所有属性都可用非常有用。

例如,如果在汽车注册时使用必填,它将确保您在创建或保存新汽车记录时不会错过任何必要的属性,例如品牌、型号和里程。这对于数据完整性而言非常关键。

请参考以下代码示例。

只读

Readonly 实用程序类型创建一个所有属性都是只读的类型。这在配置管理中非常有用,可以保护关键设置免受不必要的更改。

例如,当您的应用程序依赖于特定的 API 端点时,它们不应在执行过程中发生更改。将它们设置为只读可以保证它们在应用程序的整个生命周期中保持不变。

请参考以下代码示例。

挑选

Pick** 实用程序类型通过从现有类型中选取一组属性来构造类型。当您需要过滤掉重要信息(例如用户姓名和电子邮件)以显示在仪表板或摘要视图中时,这非常有用。它有助于提高数据的安全性和清晰度。

请参考以下代码示例。

忽略

Omit 实用程序类型通过从现有类型中排除特定属性来构造类型。

例如,如果您想与某些第三方共享用户数据但没有敏感信息(例如电子邮件地址),省略将很有用。您可以通过定义一个排除这些字段的新类型来做到这一点。特别是在 API 中,您可能想查看 API 响应中的外部内容。

请参阅下一个代码示例。

记录

Record 实用程序类型创建具有指定键和值的对象类型,这在处理结构化映射时非常有用。

例如,在库存管理系统的上下文中,Record 类型可用于在项目和数量之间进行显式映射。通过这种类型的结构,可以轻松访问和修改库存数据,同时确保所有预期的水果都得到考虑。

排除

排除**实用程序类型通过从联合中排除特定类型来构造类型。

在设计只接受某些原始类型(例如,数字或布尔值,但不接受字符串)的函数时,可以使用 排除。这可以防止意外类型可能在执行过程中导致错误的错误。

请参考以下代码示例。

提炼

Extract 实用程序类型通过从联合中提取特定类型来构造类型。

在只需要处理混合类型集合中的数值(例如执行计算)的情况下,使用 Extract 可确保仅传递数字。这在数据处理管道中非常有用,其中严格的类型可以防止运行时错误。

请参考以下代码示例。

不可为空

NonNullable 实用程序类型通过从给定类型中排除 nullundefined 来构造类型。

在需要始终定义某些值(例如用户名或产品 ID)的应用中,将它们设置为 NonNullable 将确保此类关键字段永远不会为 null未定义。它在表单验证和 API 响应期间非常有用,因为缺少值可能会导致问题。

请参阅下一个代码示例。

返回类型

ReturnType 实用程序提取函数的返回类型。

当使用返回复杂对象(例如坐标)的高阶函数或回调时,使用 ReturnType 可以简化定义预期的返回类型,而无需每次都手动声明它们。这可以通过减少与类型不匹配相关的错误来加快开发速度。

参数

参数实用程序将函数的参数类型提取为元组。

在想要动态操作或验证函数参数的情况下,例如在函数周围编写包装器时,这可以轻松提取和重用参数类型。通过确保函数签名的一致性,它极大地提高了代码库中代码的可重用性和可维护性。

请参考以下代码示例。

具有实用程序类型组合的高级用例

使用 TypeScript 开发应用程序时,组合这些实用程序类型可以获得强大的结果。让我们看一下多种实用程序类型有效协同工作的一些场景。

结合部分和必需

您可以创建一个需要某些字段而允许其他字段可选的类型。

在此示例中,UpdateUser 需要 id 属性,同时允许名称和电子邮件为可选。此模式对于更新标识符必须始终存在的记录非常有用。

创建灵活的 API 响应

您可能想要定义根据特定条件具有不同形状的 API 响应。

这里,ApiResponse 允许您为 API 调用创建灵活的响应类型。通过使用 Pick ,您可以确保响应中仅包含相关的用户数据。

结合排除和提取来过滤类型

您可能会遇到需要根据特定条件从联合中过滤掉特定类型的情况。

请参考以下代码示例。

这里,Exclude 实用程序用于创建一个类型 ( NonLoadingResponses ),从原始 ResponseTypes 联合中排除 loading,允许 handleResponse 函数仅接受成功错误作为有效输入。

最佳实践

仅使用必要的

虽然实用程序类型非常强大,但过度使用它们可能会导致复杂且不可读的代码。在利用这些实用程序和保持代码清晰度之间取得平衡至关重要。

请参阅下一个代码示例。

保持清晰度

确保每个实用程序用例的目的明确。避免将太多实用程序嵌套在一起,因为它可能会混淆类型的预期结构。

请参考以下代码示例。

性能考虑

虽然在运行时性能影响很少,因为 TypeScript 类型在编译后消失,但复杂类型会减慢 TypeScript 编译器的速度,影响开发速度。

结论

毫无疑问,TypeScript 是 Web 开发人员中最流行的语言之一。实用程序类型是 TypeScript 中的独特功能之一,如果正确使用,它可以显着提高 TypeScript 开发体验和代码质量。但是,我们不应该在所有场景中都使用它们,因为可能会出现性能和代码可维护性问题。

相关博客

  • JavaScript 和 TypeScript 的顶级 Linters:简化代码质量管理
  • 每个开发人员都应该知道的 7 个 JavaScript 单元测试框架
  • TypeScript 中感叹号的使用
  • 理解 TypeScript 中的条件类型

以上是TypeScript 实用程序类型:完整指南的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎:实施详细信息了解JavaScript引擎:实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:学习曲线和易用性Python vs. JavaScript:学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)