搜索
首页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
JavaScript数据类型:浏览器和nodejs之间是否有区别?JavaScript数据类型:浏览器和nodejs之间是否有区别?May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致,但处理方式和额外类型有所不同。1)全局对象在浏览器中为window,在Node.js中为global。2)Node.js独有Buffer对象,用于处理二进制数据。3)性能和时间处理在两者间也有差异,需根据环境调整代码。

JavaScript评论:使用//和 / * * / * / * /JavaScript评论:使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript:开发人员的比较分析Python vs. JavaScript:开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型,适合科学计算和数据分析。2.JavaScript采用弱类型,广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势,选择时应根据项目需求决定。

Python vs. JavaScript:选择合适的工具Python vs. JavaScript:选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型:1)数据科学和自动化任务选择Python;2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐,而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript:了解每个的优势Python和JavaScript:了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势,选择取决于项目需求和个人偏好。1.Python易学,语法简洁,适用于数据科学和后端开发,但执行速度较慢。2.JavaScript在前端开发中无处不在,异步编程能力强,Node.js使其适用于全栈开发,但语法可能复杂且易出错。

JavaScript的核心:它是在C还是C上构建的?JavaScript的核心:它是在C还是C上构建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1)javascriptwasdesignedAsalightweight,解释edganguageforwebbrowsers.2)Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers,典型地提示。

JavaScript应用程序:从前端到后端JavaScript应用程序:从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验,后端通过Node.js处理服务器任务。1.前端示例:改变网页文本内容。2.后端示例:创建Node.js服务器。

Python vs. JavaScript:您应该学到哪种语言?Python vs. JavaScript:您应该学到哪种语言?May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统:1)职业发展:Python适合数据科学和后端开发,JavaScript适合前端和全栈开发。2)学习曲线:Python语法简洁,适合初学者;JavaScript语法灵活。3)生态系统:Python有丰富的科学计算库,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

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

热门文章

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

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

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

禅工作室 13.0.1

禅工作室 13.0.1

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

PhpStorm Mac 版本

PhpStorm Mac 版本

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