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

AS Const 五种使用技巧，你知道多少？

来源：责编：时间：2024-03-20 08:51:31 120观看

导读在 TypeScript 中，as const 是一种类型断言，它将变量标记为 “常量”。使用 as const 可以告诉 TypeScript 编译器，某个对象的所有属性都是只读的，并且它们的类型是字面量类型，而不是更通用的类型，比如 string 或 number 类

在 TypeScript 中，as const 是一种类型断言，它将变量标记为 “常量”。使用 as const 可以告诉 TypeScript 编译器，某个对象的所有属性都是只读的，并且它们的类型是字面量类型，而不是更通用的类型，比如 string 或 number 类型。接下来，我将介绍 TypeScript 中 as const 类型断言的 5 个使用技巧。

1.确保对象的属性不可变

在下面代码中，虽然你使用 const 关键字来定义 DEFAULT_SERVER_CONFIG 常量。但你仍然可以修改该对象的属性。

const DEFAULT_SERVER_CONFIG = {    host: "localhost",    port: 8080}DEFAULT_SERVER_CONFIG.port = 9090console.log(`Server Host: ${DEFAULT_SERVER_CONFIG.port}`)// "Server Host: 9090"

如果你希望该对象的属性，是只读的不允许修改，那么你可以使用 as const 类型断言。

const DEFAULT_SERVER_CONFIG = {    host: "localhost",    port: 8080} as const

之后，当你尝试修改 port 属性时，TypeScript 编译器就会提示以下错误信息：

as const 类型断言，除了支持普通对象之外，还支持嵌套对象：

const DEFAULT_CONFIG = {    server: {        host: "localhost",        port: 8080    },    database: {        user: "root",        password: "root"    }} as const

2.确保数组或元组不可变

在工作中，数组是一种常见的数组结构。使用 as const 类型断言，我们可以让数组变成只读。

const RGB_COLORS = ["red", "green", "blue"] as const

使用了 as const 类型断言之后，RGB_COLORS 常量的类型被推断为 readonly ["red", "green", "blue"] 类型。之后，当你往 RGB_COLORS 数组添加新的颜色时，TypeScript 编译器就会提示以下错误信息：

除了数组之外，你也可以在元组上使用 as const 类型断言：

const person = ['kakuqo', 30, true] as const;person[0] = 'semlinker' // Error// Cannot assign to '0' because it is a read-only property.(2540)

3.常量枚举的替代方案

在下面代码中，我们使用 enum 关键字定义了 Colors 枚举类型。

const enum Colors {  Red = 'RED',  Green = 'GREEN',  Blue = 'BLUE',}let color: Colors = Colors.Red; // Okcolor = Colors.Green // Ok

除了使用枚举类型之外，利用 as const 类型断言，你也可以实现类似的功能：

const Colors = {  Red: 'RED',  Green: 'GREEN',  Blue: 'BLUE',} as const;type ColorKeys = keyof typeof Colors;type ColorValues = typeof Colors[ColorKeys]let color: ColorValues = 'RED'; // Okcolor = 'GREEN'; // Ok

4.让类型推断更精准

在下面代码中，red 变量的类型被推断为 string 类型。

const RGB_COLORS = ["red", "green", "blue"];let red = RGB_COLORS[0] // string

在某些场合中，你可能希望获取更精确的类型，比如对应的字面量类型，这时你就可以使用 as const 类型断言：

const RGB_COLORS = ["red", "green", "blue"] as const;let red = RGB_COLORS[0] // "red"

5.赋值时缩窄变量的类型

在下面代码中，使用 const 关键字定义的常量，它的类型会被推断为更精确的类型。

let color1 = "Red" // let color1: stringconst color2 = "Red" // const color2: "Red"

利用 as const 类型断言，我们也可以让 let 关键字定义的变量对应的类型更精准：

let color3 = "Red" as const // let color3: "Red"

当然，在实际工作中，如果明确定义常量，那么推荐直接使用 const 关键字来定义。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-77984-0.htmlAS Const 五种使用技巧，你知道多少？

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

上一篇：如何编写高性能的Java代码

下一篇：天猫超市 4 月 1 日起下线现有会员服务，后续将推出新的权益体系

标签：

热门焦点

一加Ace2 Pro官宣：普及16G内存引领24G

一加官方今天继续为本月发布的新机一加Ace2 Pro带来预热，公布了内存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引领，还有呢？#一加Ace2Pro#，2023 年 8 月，敬请期待。”同时
十个简单但很有用的Python装饰器

装饰器（Decorators）是Python中一种强大而灵活的功能，用于修改或增强函数或类的行为。装饰器本质上是一个函数，它接受另一个函数或类作为参数，并返回一个新的函数或类。它们通常用
每天一道面试题-CPU伪共享

前言：了不起：又到了每天一到面试题的时候了！学弟，最近学习的怎么样啊了不起学弟：最近学习的还不错，每天都在学习，每天都在进步！了不起：那你最近学习的什么呢？了不起学弟：最近在学习C
消费结构调整丨巨头低价博弈，拼多多还卷得动吗？

来源：征探财经作者：陈香羽随着流量红利的退潮，电商的存量博弈越来越明显。曾经主攻中高端与品质的淘宝天猫、京东重拾“低价”口号。而过去与他们错位竞争的拼多多，靠
花7万退货退款无门：谁在纵容淘宝珠宝商家造假？

来源：极点商业作者：杨铭在淘宝购买珠宝玉石后，因为保证金不够赔付，店铺关闭，退货退款难、维权无门的比比皆是。“提供相关产品鉴定证书，支持全国复检，可以30天无理由退换货。&
三星Galaxy Z Fold5今日亮相：厚度缩减但仍略显厚重

据官方此前宣布，三星将于7月26日也就是今天在韩国首尔举办Unpacked活动，届时将带来带来包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
iQOO 11S评测：行业唯一的200W标准版旗舰

【Techweb评测】去年底，iQOO推出了“电竞旗舰”iQOO 11系列，作为一款性能强机，该机不仅全球首发2K 144Hz E6全感屏，搭载了第二代骁龙8平台及144Hz电竞
Counterpoint ：OPPO双旗舰战略全面落地高端产品销量增长22%

2023年6月30日，全球行业分析机构Counterpoint Research发布的《中国智能手机高端市场白皮书》显示，中国智能手机品牌正在寻求高质量发展，中国高端智能
北京：科技教育体验基地开始登记

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