TypeScript 实用程序类型:完整指南
TL;DR: TypeScript 实用程序类型是预先构建的函数,可以转换现有类型,使您的代码更干净且更易于维护。本文通过实际示例解释了基本实用程序类型,包括如何更新用户配置文件、管理配置和安全地过滤数据。
TypeScript 是现代 Web 开发的基石,使开发人员能够编写更安全、更易于维护的代码。通过向 JavaScript 引入静态类型,TypeScript 有助于在编译时捕获错误。根据 2024 年 Stack Overflow 开发者调查,TypeScript 在开发者中最流行的脚本技术中排名第 5。
TypeScript 令人惊叹的功能是其成功的主要原因。例如,实用程序类型可以帮助开发人员简化类型操作并减少样板代码。 TypeScript 2.1 中引入了实用程序类型,并且每个新版本中都添加了其他实用程序类型。
本文将详细讨论实用程序类型,以帮助您掌握 TypeScript。
了解 TypeScript 实用程序类型
实用程序类型是 TypeScript 中预定义的泛型类型,可以将现有类型转换为新的变体类型。它们可以被认为是类型级函数,将现有类型作为参数并根据某些转换规则返回新类型。
这在使用接口时特别有用,因为通常需要修改已存在类型的变体,而实际上不需要复制类型定义。
核心实用程序类型及其实际应用
部分的
Partial 实用程序类型采用一个类型并使其所有属性都是可选的。当类型嵌套时,此实用程序类型特别有价值,因为它使属性递归地可选。
例如,假设您正在创建一个用户配置文件更新功能。在这种情况下,如果用户不想更新所有字段,则可以只使用 Partial 类型,只更新所需的字段。这在不需要所有字段的表单和 API 中非常方便。
请参考以下代码示例。
必需的
Required 实用程序类型构造一个类型,并将所提供类型的所有属性设置为 required。这对于确保在将对象保存到数据库之前所有属性都可用非常有用。
例如,如果在汽车注册时使用必填,它将确保您在创建或保存新汽车记录时不会错过任何必要的属性,例如品牌、型号和里程。这对于数据完整性而言非常关键。
请参考以下代码示例。
只读
Readonly 实用程序类型创建一个所有属性都是只读的类型。这在配置管理中非常有用,可以保护关键设置免受不必要的更改。
例如,当您的应用程序依赖于特定的 API 端点时,它们不应在执行过程中发生更改。将它们设置为只读可以保证它们在应用程序的整个生命周期中保持不变。
请参考以下代码示例。
挑选
Pick** 实用程序类型通过从现有类型中选取一组属性来构造类型。当您需要过滤掉重要信息(例如用户姓名和电子邮件)以显示在仪表板或摘要视图中时,这非常有用。它有助于提高数据的安全性和清晰度。
请参考以下代码示例。
忽略
Omit 实用程序类型通过从现有类型中排除特定属性来构造类型。
例如,如果您想与某些第三方共享用户数据但没有敏感信息(例如电子邮件地址),省略将很有用。您可以通过定义一个排除这些字段的新类型来做到这一点。特别是在 API 中,您可能想查看 API 响应中的外部内容。
请参阅下一个代码示例。
记录
Record 实用程序类型创建具有指定键和值的对象类型,这在处理结构化映射时非常有用。
例如,在库存管理系统的上下文中,Record 类型可用于在项目和数量之间进行显式映射。通过这种类型的结构,可以轻松访问和修改库存数据,同时确保所有预期的水果都得到考虑。
排除
排除**实用程序类型通过从联合中排除特定类型来构造类型。
在设计只接受某些原始类型(例如,数字或布尔值,但不接受字符串)的函数时,可以使用 排除。这可以防止意外类型可能在执行过程中导致错误的错误。
请参考以下代码示例。
提炼
Extract 实用程序类型通过从联合中提取特定类型来构造类型。
在只需要处理混合类型集合中的数值(例如执行计算)的情况下,使用 Extract 可确保仅传递数字。这在数据处理管道中非常有用,其中严格的类型可以防止运行时错误。
请参考以下代码示例。
不可为空
NonNullable 实用程序类型通过从给定类型中排除 null 和 undefined 来构造类型。
在需要始终定义某些值(例如用户名或产品 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中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

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

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...
