搜索
首页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中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

自定义Google搜索API设置教程自定义Google搜索API设置教程Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

示例颜色json文件示例颜色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

8令人惊叹的jQuery页面布局插件8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

什么是这个'在JavaScript?什么是这个'在JavaScript?Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

通过来源查看器提高您的jQuery知识通过来源查看器提高您的jQuery知识Mar 05, 2025 am 12:54 AM

jQuery是一个很棒的JavaScript框架。但是,与任何图书馆一样,有时有必要在引擎盖下发现发生了什么。也许是因为您正在追踪一个错误,或者只是对jQuery如何实现特定UI感到好奇

10张移动秘籍用于移动开发10张移动秘籍用于移动开发Mar 05, 2025 am 12:43 AM

该帖子编写了有用的作弊表,参考指南,快速食谱以及用于Android,BlackBerry和iPhone应用程序开发的代码片段。 没有开发人员应该没有他们! 触摸手势参考指南(PDF) Desig的宝贵资源

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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

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

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)