当前位置：首页 > 科技 > 软件

As Const：一个被低估的 TypeScript 特性

来源：责编：时间：2023-11-09 09:14:29 174观看

导读你有没有感觉 TypeScript中可能有一些被低估但却非常有用的工具，你并没有充分利用？的确有，今天我们要重点介绍一个：as const。它虽然沉默却强大，而且非常有力，是一个被低估的功能，但它的力量却强大无比。理解 'as const'以下

你有没有感觉 TypeScript中可能有一些被低估但却非常有用的工具，你并没有充分利用？的确有，今天我们要重点介绍一个：as const。它虽然沉默却强大，而且非常有力，是一个被低估的功能，但它的力量却强大无比。

理解 'as const'

以下是一个没有 as const 的代码片段：

const menu = {    home: '/home',    about: '/about',    contact: '/contact'};

这个TypeScript的世界里，这个变量可以随心所欲地变化和改变。听起来很灵活，，但是这里有个陷阱。

请考虑这个 go to root 方法：

function goTo(route: 'home' | 'about' | 'contact') {    // some implementation}

注意到了吗？如果你在 menu 对象中添加了另一条路由，你也需要更新函数 goTo 。这就是冗余，导致同一类型有多个真实来源。

as const 可以为我们解决这个问题。

TypeScript的期望与现实

当你在使用TypeScript时，有时你所期待的和实际发生的情况会痛苦地产生巨大的分歧。当我们试图从现有的类型中创建一个新的类型时，这种分歧变得非常明显。

这里有个例子。假设你有一个对象，你期望TypeScript只考虑这个对象的属性。但是，意外的是！TypeScript只把它当作一个字符串来考虑。

let route: keyof typeof menu;route = 'store'; // No error

在这种情况下，TypeScript认为 route 是一个可能会发生变化的字符串。但是，我们希望基于属性的固定类型。我们的期望和现实并未对齐。

解决方案：'as const'

我们刚刚经历的那种痛苦的分歧，就是 as const 试图解决的问题。通过将易变属性改为不变属性， as const 使我们的期望与现实保持一致。

const menu = {   home: '/home',   about: '/about',   contact: '/contact' } as const;

通过这个简单的改变，我们的对象属性变成了只读。我们看看它如何影响我们之前的问题：

let route: keyof typeof menu; route = 'store'; // Error. Exactly what we wanted!

通过使用 as const 使对象变为不可变，TypeScript 现在明白 route 应该只允许提供的键。现在，我们得到了我们想要的确切结果：当我们试图设置无效值时，会出现类型错误。

与 object.freeze 的比较

你可能对JavaScript方法 Object.freeze() 有所了解。 Object.freeze() 和 as const 都可以使对象只读，但它们之间存在着关键的差异。

我们快速了解一下他们的能力：

const menuFrozen = Object.freeze({    home: '/home',    about: '/about',    contact: '/contact'});const menuConst = {    home: '/home',    about: '/about',    contact: '/contact'} as const;

以及一些结果：

// 这不会改变任何东西，home 仍然是'/home'menuFrozen.home = '/newHome';// 编译时错误menuConst.home = '/newHome';

通过 Object.freeze() ，我们拥有了一个运行时概念，可以防止JavaScript对象的更改。然而， Object.freeze() 并不影响 TypeScript 的类型推断。

另一方面，有了 as const ，TypeScript在编译时将对象视为不可变的，使你的类型检查更为严格，这有助于捕捉更多可能的错误。

因此，虽然 as const 和 Object.freeze() 在表面上看起来可能相似，但它们服务于不同的目的。 as const 在类型检查上更为强大，而 Object.freeze() 只在运行时强制实施不变性。

一个配合 'as const' 的更清洁的 'go to root' 函数

我们使用 as const 重构 goTo 函数：

function goTo(route: keyof typeof menu) {      // some implementation}

就这样，as const 使我们免于重复信息的愚蠢操作。我们可以从我们创建的对象中推断出一个类型。这样是不是更简洁了？

使用 'as const' 提取对象值

我们使用 as const 提取我对象值，颠覆TypeScript的规则，获取我们需要的所有详细信息，以编写强大且无bug的代码。这只需要一点类型魔法。

以下是一个示例：

type Routes = typeof menu[keyof typeof menu]; // Routes is now equal to '/home' | '/about' | '/contact'

本文链接：http://www.28at.com/showinfo-26-17890-0.htmlAs Const：一个被低估的 TypeScript 特性

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： SpringCloud OpenFeign整合Ribbon实现负载均衡及源码分析

下一篇： Python中的双下划线：特殊方法和属性的魔法世界！

标签：

热门焦点

天猫精灵Sound Pro体验：智能音箱没有音质？来听听我的

这几年除了手机作为智能生活终端最主要的核心之外，第二个可以成为中心点的产品是什么？——是智能音箱。手机在执行命令的时候有两种操作方式，手和智能语音助手，而智能音箱只
7月安卓手机性能榜：红魔8S Pro再夺榜首

7月份的手机市场风平浪静，除了红魔和努比亚带来了两款搭载骁龙8Gen2领先版处理器的新机之外，别的也想不到有什么新品了，这也正常，通常6月7月都是手机厂商修整的时间，进入8月份之
三言两语说透设计模式的艺术-单例模式

写在前面单例模式是一种常用的软件设计模式，它所创建的对象只有一个实例，且该实例易于被外界访问。单例对象由于只有一个实例，所以它可以方便地被系统中的其他对象共享，从而减少
腾讯VS网易，最卷游戏暑期档，谁能笑到最后？

作者：无锈钵来源：财经无忌7月16日晚，上海1862时尚艺术中心。伴随着幻象的精准命中，硕大的荧幕之上，比分被定格在了14：12，被寄予厚望的EDG战队以绝对的优势战胜了BLG战队，拿下了总决
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
小米MIX Fold 3配置细节曝光：搭载领先版骁龙8 Gen2+罕见5倍长焦

这段时间以来，包括三星、一加、荣耀等等有不少品牌旗下的最新折叠屏旗舰都得到了不少爆料，而小米新一代折叠屏旗舰——小米MIX Fold 3此前也屡屡被传
质感不错！OPPO K11渲染图曝光：旗舰IMX890传感器首次下放

一直以来，OPPO K系列机型都保持着较为均衡的产品体验，历来都是2K价位的明星机型，去年推出的OPPO K10和OPPO K10 Pro两款机型凭借各自的出色配置，堪称有
利用职权私自解除被封帐号 Meta开除20多名员工

11月18日消息，据外媒援引知情人士表示，过去一年时间内，Facebook母公司Meta解雇或处罚了20多名员工以及合同工，指控这些人通过内部系统以不当方式重置用户帐号，其
北京：科技教育体验基地开始登记

　　北京“科技馆之城”科技教育体验基地登记和认证工作日前启动。首批北京科技教育体验基地拟于2023年全国科普日期间挂牌，后续还将开展常态化登记。　　北京科技教育体验基