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

AS Const 五种使用技巧,你知道多少?

来源: 责编: 时间:2024-03-20 08:51:31 316观看
导读在 TypeScript 中,as const 是一种类型断言,它将变量标记为 “常量”。使用 as const 可以告诉 TypeScript 编译器,某个对象的所有属性都是只读的,并且它们的类型是字面量类型,而不是更通用的类型,比如 string 或 number 类

nmk28资讯网——每日最新资讯28at.com

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

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

在下面代码中,虽然你使用 const 关键字来定义 DEFAULT_SERVER_CONFIG 常量。但你仍然可以修改该对象的属性。nmk28资讯网——每日最新资讯28at.com

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 类型断言。nmk28资讯网——每日最新资讯28at.com

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

之后,当你尝试修改 port 属性时,TypeScript 编译器就会提示以下错误信息:nmk28资讯网——每日最新资讯28at.com

nmk28资讯网——每日最新资讯28at.com

as const 类型断言,除了支持普通对象之外,还支持嵌套对象:nmk28资讯网——每日最新资讯28at.com

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

nmk28资讯网——每日最新资讯28at.com

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

在工作中,数组是一种常见的数组结构。使用 as const 类型断言,我们可以让数组变成只读。nmk28资讯网——每日最新资讯28at.com

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

使用了 as const 类型断言之后,RGB_COLORS 常量的类型被推断为 readonly ["red", "green", "blue"] 类型。之后,当你往 RGB_COLORS 数组添加新的颜色时,TypeScript 编译器就会提示以下错误信息:nmk28资讯网——每日最新资讯28at.com

nmk28资讯网——每日最新资讯28at.com

除了数组之外,你也可以在元组上使用 as const 类型断言:nmk28资讯网——每日最新资讯28at.com

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 枚举类型。nmk28资讯网——每日最新资讯28at.com

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

除了使用枚举类型之外,利用 as const 类型断言,你也可以实现类似的功能:nmk28资讯网——每日最新资讯28at.com

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 类型。nmk28资讯网——每日最新资讯28at.com

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

在某些场合中,你可能希望获取更精确的类型,比如对应的字面量类型,这时你就可以使用 as const 类型断言:nmk28资讯网——每日最新资讯28at.com

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

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

在下面代码中,使用 const 关键字定义的常量,它的类型会被推断为更精确的类型。nmk28资讯网——每日最新资讯28at.com

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

利用 as const 类型断言,我们也可以让 let 关键字定义的变量对应的类型更精准:nmk28资讯网——每日最新资讯28at.com

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

当然,在实际工作中,如果明确定义常量,那么推荐直接使用 const 关键字来定义。nmk28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-77984-0.htmlAS Const 五种使用技巧,你知道多少?

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

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

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

标签:
  • 热门焦点
  • 摸鱼心法第一章——和配置文件说拜拜

    为了能摸鱼我们团队做了容器化,但是带来的问题是服务配置文件很麻烦,然后大家在群里进行了“亲切友好”的沟通图片图片图片图片对比就对比,简单对比下独立配置中心和k8s作为配
  • 分布式系统中的CAP理论,面试必问,你理解了嘛?

    对于刚刚接触分布式系统的小伙伴们来说,一提起分布式系统,就感觉高大上,深不可测。而且看了很多书和视频还是一脸懵逼。这篇文章主要使用大白话的方式,带你理解一下分布式系统
  • 如何正确使用:Has和:Nth-Last-Child

    我们可以用CSS检查,以了解一组元素的数量是否小于或等于一个数字。例如,一个拥有三个或更多子项的grid。你可能会想,为什么需要这样做呢?在某些情况下,一个组件或一个布局可能会
  • 只需五步,使用start.spring.io快速入门Spring编程

    步骤1打开https://start.spring.io/,按照屏幕截图中的内容创建项目,添加 Spring Web 依赖项,并单击“生成”按钮下载 .zip 文件,为下一步做准备。请在进入步骤2之前进行解压。图
  • 自动化在DevOps中的力量:简化软件开发和交付

    自动化在DevOps中扮演着重要角色,它提升了DevOps的效能。通过自动化工具和方法,DevOps团队可以实现以下目标:消除手动和重复性任务。简化流程。在整个软件开发生命周期中实现更
  • 中国家电海外掘金正当时|出海专题

    作者|吴南南编辑|胡展嘉运营|陈佳慧出品|零态LT(ID:LingTai_LT)2023年,出海市场战况空前,中国创业者在海外纷纷摩拳擦掌,以期能够把中国的商业模式、创业理念、战略打法输出海外,他们依
  • 签约井川里予、何丹彤,单视频点赞近千万,MCN黑马永恒文希快速崛起!

    来源:视听观察永恒文希传媒作为一家MCN公司,说起它的名字来,可能大家会觉得有点儿陌生,但是说出来下面一串的名字之后,或许大家就会感到震惊,原来这么多网红,都签约这家公司了。根
  • 一条抖音4亿人围观 ! 这家MCN比无忧传媒还野

    作者:Hiu 来源:互联网品牌官01 擦边少女空降热搜,幕后推手曝光被网友誉为“纯欲天花板”的女网红井川里予,近期因为一组哥特风照片登上热搜,引发了一场互联网世界关于
  • 8月见!小米MIX Fold 3获得3C认证:支持67W快充

    这段时间以来,包括三星、一加、荣耀等等有不少品牌旗下的最新折叠屏旗舰都得到了不少爆料,而小米新一代折叠屏旗舰——小米MIX Fold 3此前也屡屡被传
Top