”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 简化 TypeScript 中的联合类型和数组

简化 TypeScript 中的联合类型和数组

发布于2024-11-08
浏览:973

Simplifying Union Types and Arrays in TypeScript

使用 TypeScript 时,您可能会发现自己需要定义一个联合类型和一个包含该类型所有可能值的数组。常见的方法是这样写:

type Taste = 'しょうゆ' | 'みそ' | 'とんこつ';
const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

乍一看,这似乎不错。然而,这里有一个隐藏的问题:每次想要更改或添加选项时,都需要更新 Taste 联合类型和味道数组。这种重复的工作可能会导致错误并使维护代码变得更加乏味。

幸运的是,有一种方法可以通过减少冗余来简化这一过程。通过在 TypeScript 中使用 as const 断言和 typeof,您可以将联合类型和数组的定义合并到一处。以下是重构上述代码的方法:

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;
type Taste = (typeof tastes)[number];

这种方法有几个好处:

  1. 单一事实来源

    您只需在味道数组中定义一次值列表。口味类型自动从此数组派生,因此如果您需要更新列表,只需在一处执行即可。

  2. 类型安全:

    通过使用 as const,TypeScript 将品味数组视为具有文字类型的元组,而不仅仅是字符串数组。这可确保口味类型保持准确并与口味中的值保持一致。

  3. 更好的维护

    由于 Taste 类型是从数组生成的,因此不存在类型与实际值不匹配的风险。这减少了出现错误的可能性并使代码更易于维护。

示例用例

现在,每当您在代码中使用 Taste 类型时,它都保证与味道数组中的值匹配:

function describeTaste(taste: Taste): string {
  switch (taste) {
    case 'しょうゆ':
      return 'Savory soy sauce flavor.';
    case 'みそ':
      return 'Rich miso flavor.';
    case 'とんこつ':
      return 'Creamy pork broth flavor.';
    default:
      return 'Unknown taste';
  }
}

const allTastes: Taste[] = tastes; // Safe, because they match the type!

这种模式不仅提高了代码的可读性,而且还确保它不易出错,特别是在处理需要保持同步的多个值时。

通过采用此策略,您可以使 TypeScript 代码更具可维护性和可扩展性。当您处理大量值或您的代码库随着时间的推移而增长时,这特别有用。

版本声明 本文转载于:https://dev.to/mktoho12/simplifying-union-types-and-arrays-in-typescript-i60?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何使用链接打开本地文件夹?
    如何使用链接打开本地文件夹?
    通过链接打开本地文件夹通过链接打开本地文件夹进行了多次尝试,例如: 打开文件夹</a>
    编程 发布于2024-11-08
  • 如何在 JavaScript 和 jQuery 中无缝访问 PHP 变量?
    如何在 JavaScript 和 jQuery 中无缝访问 PHP 变量?
    在 JavaScript 或 jQuery 中访问 PHP 变量:避免 Echo 过载许多开发人员遇到在 JavaScript 和 jQuery 中访问 PHP 变量的挑战。传统方法涉及回显 PHP 标签内的变量,例如:<?php echo $variable1; ?> <?php...
    编程 发布于2024-11-08
  • 为什么我的 `` 元素不继承其父元素的字体样式?
    为什么我的 `` 元素不继承其父元素的字体样式?
    字体继承不兼容在CSS中,元素继承其父元素的字体属性,例如元素。但是, 元素并不总是遵循此规则。在提供的示例中, 和 元素共享 Verdana 字体,但 元素显示为“MS壳牌Dlg”。这是因为表单元素(包括 )具有默认字体设置,该设置会覆盖继承的字体属性。覆盖默认字体确保所有字体继承一致元素时,...
    编程 发布于2024-11-08
  • 集成与端到端(E 测试:了解它们的差异以及何时使用它们
    集成与端到端(E 测试:了解它们的差异以及何时使用它们
    在软件开发中,测试在确保应用程序到达最终用户之前的可靠性和性能方面发挥着至关重要的作用。由于可用的测试方法多种多样,因此了解哪种方法适合您的需求非常重要。两种广泛使用的测试方法是集成测试和端到端(E2E)测试。两者都旨在验证系统是否正常工作,但他们从不同的角度进行验证。在这篇文章中,我们将探讨集成...
    编程 发布于2024-11-08
  • 初级后端开发人员寻求无偿工作以获得经验
    初级后端开发人员寻求无偿工作以获得经验
    大家好, 我叫 Harith,是一名初级后端开发人员。我对使用 Python 和 Django 框架进行 Web 开发非常感兴趣。我希望通过为开源项目做出贡献来获得更多实践经验。 我提供什么: 愿意在没有任何报酬的情况下参与项目,因为我的主要目标是提高我的技能和拓宽我的知识。 了解 Django 和...
    编程 发布于2024-11-08
  • 如何在 Python 中检查列表是否共享任何项目?
    如何在 Python 中检查列表是否共享任何项目?
    在 Python 中测试列表是否共享任何项目简介在 Python 中处理多个列表时,通常需要确定是否有元素重叠在这些列表之间。这是各种数据分析和操作任务的基本操作。简答在 Python 中测试列表重叠的推荐方法是利用 not set(a).isdisjoint(b ) 表达。它为此任务提供了一种普遍...
    编程 发布于2024-11-08
  • Node.js 中与 WebSockets 和 Socket.IO 的实时通信
    Node.js 中与 WebSockets 和 Socket.IO 的实时通信
    现代 Web 应用程序通常需要实时通信,无论是聊天系统、实时更新、协作编辑还是通知。传统的 HTTP 通信不足以满足实时应用程序的需要,因为它依赖于请求-响应模式。这就是 WebSockets 发挥作用的地方,它允许服务器和客户端之间进行全双工通信。 在本文中,我们将探讨: WebSocket 是什...
    编程 发布于2024-11-08
  • 如何解决使用 JavaScript 更改 iframe src 的问题
    如何解决使用 JavaScript 更改 iframe src 的问题
    使用 JavaScript 更改 iframe src:疑难解答单击单选按钮时更改 iframe 的 src 属性时遇到问题。要纠正此问题,必须检查代码以确定确切的原因。一个可能的问题是括号的错误使用。在您的代码中,该行:document.getElementById['calendar'].src...
    编程 发布于2024-11-08
  • 为什么 `window.onscroll` 在 iPhone/iPad 上不起作用?
    为什么 `window.onscroll` 在 iPhone/iPad 上不起作用?
    在 iPhone/iPad 上使用滚动事件捕获事件尝试在 iPad 上捕获滚动事件时,故障排除工作揭示了常见的方法例如 window.onscroll 和 document.onscroll 无法触发所需的响应。理解 iOS 上的事件处理设备iPhoneOS 事件处理机制与传统桌面浏览器不同。在连续...
    编程 发布于2024-11-08
  • 从开发人员到审阅者:初级开发人员审阅数据库查询的清单
    从开发人员到审阅者:初级开发人员审阅数据库查询的清单
    作为开发人员,提供高质量的代码至关重要,这些代码不仅具有功能性,而且还针对性能进行了优化。在开发人员领域的三年里,我从一名实践开发人员转变为审阅者角色。我在审核过程中关注的关键领域之一是数据库查询优化。 为什么关注数据库查询? 数据库查询可以显着影响应用程序的性能。编写得好的查询可以有效地获取数据,...
    编程 发布于2024-11-08
  • Mockito 是最好的 Java 模拟框架吗?  对其优缺点的综合评价。
    Mockito 是最好的 Java 模拟框架吗? 对其优缺点的综合评价。
    最佳 Java 模拟框架:Mockito在 Java 中,制作模拟对象对于有效的单元测试至关重要。鉴于选择过多,为此目的确定最佳框架可能会令人畏惧。本文评估了最突出的选择之一 Mockito,重点介绍了它的优点和缺点。Mockito 因其用户友好的语法而脱颖而出,使其易于开发人员使用。其简化方法针对...
    编程 发布于2024-11-08
  • 如何可靠地获取当前运行的Python文件的路径?
    如何可靠地获取当前运行的Python文件的路径?
    如何获取当前执行的Python文件的路径问题:确定当前运行的Python文件的路径可能很麻烦,特别是当遇到在特定场景下证明不可靠的方法时。其中包括从另一个脚本或在 IDLE 或 Mac OS X v10.6 等特定环境中启动执行的实例。解决方案:通用获取当前执行的 Python 的文件路径文件,采用...
    编程 发布于2024-11-08
  • Stack Overflow 如何创建这些信息丰富的弹出消息?
    Stack Overflow 如何创建这些信息丰富的弹出消息?
    复制 Stack Overflow 的弹出消息功能您可能已经注意到 Stack Overflow 上出现的时尚且内容丰富的弹出消息。这些消息为用户提供了有价值的通知和指导,您可能想知道如何在自己的网站上实现类似的功能。Stack Overflow 利用 HTML、CSS 和 JavaScript 的...
    编程 发布于2024-11-08
  • 为什么 Python 中没有元组理解?
    为什么 Python 中没有元组理解?
    理解 Python 中元组推导式的缺失在 Python 编程语言中,列表推导式和字典推导式提供了生成结构化数据的有效方法。然而,缺乏元组理解是一个异常现象。本文深入探讨了这一遗漏背后的原因。元组不变性是原因的假设并不成立。元组确实是不可变的,但这个属性并不妨碍它们在推导式中构建。问题的关键在于 Py...
    编程 发布于2024-11-08
  • 如何使用 VLC 模块在 Python 中播放 MP3 歌曲?
    如何使用 VLC 模块在 Python 中播放 MP3 歌曲?
    使用 Python 播放 MP3 歌曲使用正确的工具,在 Python 中播放 MP3 歌曲可以非常简单。错误的做法:尝试使用wave模块打开MP3文件,如下图所示不推荐:import wave w = wave.open("e:/LOCAL/Betrayer/Metalik Klinik...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3