文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 00:09

关注

在 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 = 9090
console.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; // Ok
color = 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'; // Ok
color = '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: string
const color2 = "Red" // const color2: "Red"

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

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

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

来源:全栈修仙之路内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯