”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 释放 TypeScript“as const”的力量:您需要了解的被低估的功能

释放 TypeScript“as const”的力量:您需要了解的被低估的功能

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

Unlocking the Power of TypeScript

在讨论 TypeScript 中最被低估的功能时,经常被忽视的一个功能是 as const 断言。此功能在各种场景中都非常有用,为开发人员提供了显着的好处。

理解“as const”

首先,让我们定义 as const 的作用。想象一下你有一个像这样的对象:

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
};

如果您将鼠标悬停在路线的属性上,您会注意到它们被输入为字符串。例如,routes.home 被输入为字符串,而不是“/home”。这是因为 TypeScript 假设这些属性可能会更改,因此它将它们推断为可变字符串。

现在,考虑一个应该只接受这些特定路由的函数。您可以像这样定义类型:

function changeRoute(route: "home" | "profile" | "notifications") {
  // navigate to route
}

这种方法有效,但重复且容易出错。如果添加新路由,则必须更新函数的类型定义,这并不理想。

使对象不可变

这就是 as const 发挥作用的地方。通过使用 as const,您可以使对象不可变,并且 TypeScript 将推断文字类型而不仅仅是字符串。

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
} as const;

现在,routes.home 键入为“/home”,routes.notifications 键入为“/notifications”,依此类推。这种不变性确保这些属性无法更改,并且 TypeScript 可以识别它们的特定值。

实际用例

让我们将 const 集成到函数中:

function changeRoute(route: typeof routes[keyof typeof routes]) {
  // navigate to route
}

这里,typeofroutes获取路由对象的类型,keyoftypeofroutes提取键,从而得到路由值的确切类型。这使得该函数能够适应路由对象中的任何更改,而无需重复更新。

提取类型

as const 的另一个强大方面是它如何实现类型提取。例如:

type Routes = (typeof routes)[keyof typeof routes];

这种类型的定义动态提取routes对象的值,使功能更易于维护并减少冗余。

结论

TypeScript 中的 as const 断言是一个多功能且强大的功能,可以显着提高类型安全性并减少代码中的冗余。通过使对象不可变并启用精确的类型推断,它简化了代码库的维护和扩展。尝试一下,您就会发现它如何增强您的 TypeScript 项目!
快乐编码!

[披露:本文是协作成果,结合了我自己的想法并在 ChatGPT 的帮助下增强了清晰度。]

版本声明 本文转载于:https://dev.to/sharoztanveer/unlocking-the-power-of-typescripts-as-const-the-underrated-feature-you-need-to-know-25l7?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSocke...
    编程 发布于2024-12-26
  • 如何在 HTML 表格中有效地使用 Calc() 和基于百分比的列?
    如何在 HTML 表格中有效地使用 Calc() 和基于百分比的列?
    在表格中使用 Calc():克服百分比困境创建具有固定宽度列和可变宽度列的表格可能具有挑战性,尤其是在尝试在其中使用 calc() 函数。在 HTML 中,使用 px 或 em 设置固定列宽非常简单。但是,对于可变宽度列,通常使用百分比 (%) 单位。然而,当在表中使用 calc() 时,百分比似乎...
    编程 发布于2024-12-26
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-12-26
  • 如何在PHP中通过POST提交和处理多维数组?
    如何在PHP中通过POST提交和处理多维数组?
    在 PHP 中通过 POST 提交多维数组当使用具有可变长度的多列和行的 PHP 表单时,有必要进行转换输入到多维数组中。这是解决这一挑战的方法。首先,为每列分配唯一的名称,例如:<input name="topdiameter[' current ']" type=&qu...
    编程 发布于2024-12-26
  • 除了“if”语句之外:还有什么地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有什么地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句:if、whi...
    编程 发布于2024-12-25
  • for(;;) 循环到底是什么以及它是如何工作的?
    for(;;) 循环到底是什么以及它是如何工作的?
    揭秘神秘的 for(;;) 循环在古老的代码库深处,你偶然发现了一个令人困惑的奇特 for 循环你的理解。其显示如下:for (;;) { //Some stuff }您深入研究在线资源,但发现自己陷入沉默。让我们剖析这个神秘的构造。for 循环的结构Java 中的 for 循环遵循特定的语...
    编程 发布于2024-12-25
  • Java 的 Scanner.useDelimiter() 如何使用正则表达式?
    Java 的 Scanner.useDelimiter() 如何使用正则表达式?
    Java 中使用 Scanner.useDelimiter 了解分隔符Java 中的 Scanner 类提供了 useDelimiter 方法,允许您指定分隔符(字符或模式)来分隔代币。然而,使用分隔符可能会让初学者感到困惑。让我们用更简单的术语来分解它。考虑片段:sc = new Scanner(...
    编程 发布于2024-12-25
  • 如何在 Android 中显示动画 GIF?
    如何在 Android 中显示动画 GIF?
    在 Android 中显示动画 GIF尽管最初误解 Android 不支持动画 GIF,但实际上它具有解码和显示动画的能力显示它们。这是通过利用 android.graphics.Movie 类来实现的,尽管这方面没有广泛记录。要分解动画 GIF 并将每个帧作为可绘制对象合并到 AnimationD...
    编程 发布于2024-12-25
  • 为什么我在运行 phpize 时出现“找不到 config.m4”错误?
    为什么我在运行 phpize 时出现“找不到 config.m4”错误?
    解决 phpize 中的“找不到 config.m4”错误运行 phpize 时遇到“找不到 config.m4”错误是可能阻碍 ffmpeg 等扩展安装的常见问题。以下是解决此错误并让 phpize 启动并运行的方法。先决条件:您已经安装了适合您的 PHP 版本的必要开发包,例如 php- Deb...
    编程 发布于2024-12-25
  • 打印时如何在每页上重复表头?
    打印时如何在每页上重复表头?
    在打印模式下重复表格标题当表格在打印过程中跨越多个页面时,通常需要有标题行(TH 元素)在每页上重复,以便于参考。 CSS 提供了一种机制来实现此目的。解决方案:使用 THEAD 元素CSS 中的 THEAD 元素是专门为此目的而设计的。它允许您定义一组应在每个打印页面上重复的标题行。使用方法如下:...
    编程 发布于2024-12-25
  • 尽管代码有效,为什么 POST 请求无法捕获 PHP 中的输入?
    尽管代码有效,为什么 POST 请求无法捕获 PHP 中的输入?
    解决 PHP 中的 POST 请求故障在提供的代码片段中:action=''而不是:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"检查 $_POST数组:表单提交后使用 var_dump 检查 $_POST 数...
    编程 发布于2024-12-25
  • 如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    在 PHP 中组合关联数组在 PHP 中,将两个关联数组组合成一个数组是一项常见任务。考虑以下请求:问题描述:提供的代码定义了两个关联数组,$array1 和 $array2。目标是创建一个新数组 $array3,它合并两个数组中的所有键值对。 此外,提供的数组具有唯一的 ID,而名称可能重合。要求...
    编程 发布于2024-12-25
  • 为什么 `cout` 会误解 `uint8_t` 以及如何修复它?
    为什么 `cout` 会误解 `uint8_t` 以及如何修复它?
    深入分析:为什么 uint8_t 无法正确打印您遇到了 uint8_t 变量的值无法正确打印的问题库特。经过调查,您发现将数据类型更改为 uint16_t 可以解决该问题。此行为源于 uint8_t 的基本性质以及 cout 处理字符数据的方式。uint8_t 在内部存储一个无符号 8 位整数。当您...
    编程 发布于2024-12-25
  • MySQLnd 是否已启用?
    MySQLnd 是否已启用?
    确定 MySQLnd 驱动程序状态在 PHP 中使用 MySQL 时,验证 MySQLnd 是否是活动数据库驱动程序至关重要。与旧版驱动程序相比,此高级驱动程序提供了增强的性能和功能。使用 MySQLi 检查 MySQLnd对于 MySQLi 连接,您可以使用以下代码来确定 MySQLnd状态:$m...
    编程 发布于2024-12-25
  • HTML 格式标签
    HTML 格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2024-12-25

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

Copyright© 2022 湘ICP备2022001581号-3