as const:一个被低估的 TypeScript 特性

更新日期: 2023-11-09阅读: 574标签: Typescript

你有没有感觉 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'

来源: 大迁世界

链接: https://www.fly63.com/article/detial/12547

用TypeScript弥补Elm和JavaScript之间的差距

近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。

Typescript 和 Javascript之间的区别

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?

Nerv_一款类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库

Nerv_是一款由京东凹凸实验室打造的类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库。它基于React标准,提供了与 React 16 一致的使用方式与 API。

TypeScript_TS系列之高级类型

交叉类型:将多个类型合并为一个类型、联合类型:表示取值可以为多种类型中的一种、混合类型:一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性、类型断言:可以用来手动指定一个值的类型

TypeScript 在 JavaScript 的基础上的改动

在做比较大的,多人合作的项目的时候,TypeScript会更加地适合,这得益于它的可读性,面向对象性以及易于重构的特点。但如果只是自己做小程序,不需要太多人参与的时候,JavaScript则会更加简单。

5分钟了解TypeScript

有两种方式安装TypeScript,如何创建第一个TypeScript文件,在TypeScript中,可以使用interface来描述一个对象有firstName和lastName两个属性,TypeScript支持JavaScript的新功能,其中很重要的一个功能就是基于类的面向对象编程

如何编写 Typescript 声明文件

使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。有关TypeScript声明类型声明相关的目前就总结了这些比较常用的

谷歌为何会选用TypeScript?

谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿

为什么要学习Typescript 语言呢?Typescript 开发环境安装

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。

使用TypeScript两年后-值得吗?

差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。我在前端技术方面积累了一些类似的经验

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!