TypeScript 中 as const使用介绍

目录
  • 引言
  • 例子
  • 例子

引言

as const 是 TypeScript 中的一个用于修饰符，它可以被用来修改类型推断的行为。

当 as const 修饰符用在变量声明或表达式的类型上时，它会强制 TypeScript 将变量或表达式的类型视为不可变的（immutable）。这意味着，如果你尝试对变量或表达式进行修改，TypeScript 会报错。

例子

const foo = ['a', 'b'] as const;
foo.push('c');  // TypeScript 会报错，因为 foo 类型被声明为不可变的
const bar = { x: 1, y: 2 } as const;
bar.x = 3;  // TypeScript 会报错，因为 bar 类型被声明为不可变的

as const 修饰符还可以用来修改对象字面量和数组字面量的类型推断。在这种情况下，as const 会强制 TypeScript 将对象字面量或数组字面量的类型推断为不可变的，即使没有显式地指定类型。

例子

const foo = ['a', 'b'] as const;  // 等价于 const foo: ['a', 'b'] = ['a', 'b']
const bar = { x: 1, y: 2 } as const;  // 等价于 const bar: { x: 1, y: 2 } = { x: 1, y: 2 }

在这两个例子中，TypeScript 会将 foo 和 bar 的类型推断为不可变的数组和对象，即使没有显式地指定类型。

总的来说，as const 修饰符是一种有用的工具，可以帮助我们提高代码的类型安全性，避免在不应该修改的地方进行修改。

编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

以上就是TypeScript 中 as const使用介绍的详细内容，更多关于TypeScript as const使用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS装饰者模式和TypeScript装饰器

    JS装饰者模式和TypeScript装饰器

    装饰者模式介绍 装饰者模式(Decorator Pattern)也称为装饰器模式,在不改变对象自身的基础上,动态增加额外的职责.属于结构型模式的一种. 使用装饰者模式的优点:把对象核心职责和要装饰的功能分开了.非侵入式的行为修改. 举个例子来说,原本长相一般的女孩,借助美颜功能,也能拍出逆天的颜值.只要善于运用辅助的装饰功能,开启瘦脸,增大眼睛,来点磨皮后,咔嚓一拍,惊艳无比. 经过这一系列叠加的装饰,你还是你,长相不增不减,却能在镜头前增加了多重美.如果你愿意,还可以尝试不同的装饰风格,只要装

  • 简单三行代码函数实现几十行Typescript类型推导

    目录 场景 摸鱼吃瓜式排查 元组大法 感叹 场景 最近在设计一些基础的项目框架设计上的 sdk api,比如埋点系统.权限系统之类的,要提供一些便捷的封装方法给上层使用.于是遇到了这么个场景. 有一个对象常量里,存了一些方法,例如: const METHODS = { a: () => "a" as const, b: () => "b" as const, c: () => "c" as const } 然后想要封装这样一个

  • 基于tsup打包TypeScript实现过程

    目录 什么是tsup ⚙️ Install 快速上手 配置文件 打包构建 小彩蛋 安装失败~ 什么是tsup Tsup 可以快速打包 typescript 库,无需任何配置,并且基于esbuild进行打包,打包 ts 文件速度毫秒级,方便又高效. ⚙️ Install 在项目文件夹中本地安装它.官网传送门 npm i tsup -D # Or Yarn yarn add tsup --dev Tsup也可以全局安装,但不建议这样做. 快速上手 tsup默认支持无配置打包,我们尝试一下. 步骤 1

  • Typescript装饰器AOP示例详解

    目录 在Typescript中使用装饰器 配置 类装饰器 方法装饰器 AOP(面向切面编程) 在Typescript中使用装饰器 上文中讲了装饰模式,今天来来介绍一些Typescript里面的装饰器,以及如何用装饰器来实现之前提及装饰模式,装饰器只是实现装饰模式的一种方式,并非唯一 配置 在Typescript要使用装饰器需要在tsconfig打开装饰器的语法 "compilerOptions": { "experimentalDecorators": true }

  • 详解Typescript 严格模式有多严格

    目录 正文 noImplicitAny noImplicitThis alwaysStrict strictBindCallApply strictNullChecks strictPropertyInitialization strictFunctionTypes 正文 TypeScript 是微软于 2012 年推出的一门语言,它是 JavaScript 的超集,具有更强的可选类型系统.TypeScript 和 JavaScript 一样是有严格模式的,今天就来看看 TypeScript 中

  • 项目中使用TypeScript的TodoList实例详解

    目录 为什么用todolist todolist的ts化 数据到视图 实现handleTodoItem readonly 分类 交叉类型 新增功能 联合类型 可选属性 数据转视图 总结 为什么用todolist 现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定.遍历.条件判断等各种逻辑,而能完成这一系列内容的,todolist就是个很好的实现,比如react的教程.solijs教程都是以todolist为例 当然,你如果想看各种框架实现tod

  • C++中引用和const关键字介绍

    目录 引用 常引用 const关键字用法 1)定义常量 2)定义常量指针 3)定义常引用 总结 引用 下面的写法定义了一个引用,并将其初始化为引用某个变量.类型名 & 引用名 = 某变量名; int n = 4; int & r = n; // r 引用了n,r的类型是 int & 某个变量的引用,等价于这个变量,相当于该变量的一个别名. int n = 7; int & r = n; // r 引用了n,r和n就是一回事 r = 4; cout << r; /

  • 深入理解JavaScript和TypeScript中的class

    前言 对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大多数前端开发者的一个短板. 最近在学习 Angular的过程中发现其大量的运用了 class,不得不佩服,Angular 确实是一个优秀的.值得深入研究的 框架. 本文将简单的介绍一下 JavaScript 和 TypeScript 中的 class. 基本概念 在介绍 class 之前,要先

  • 在 Typescript 中使用可被复用的 Vue Mixin功能

    转到用 Typescript 写 Vue 应用以后,经过一轮工具链和依赖的洗礼,总算蹒跚地能走起来了,不过有一个很常用的功能 mixin,似乎还没有官方的解决方案. 既想享受 mixin 的灵活和方便,又想收获 ts 的类型系统带来的安全保障和开发时使用 IntelliSense 的顺滑体验. vuejs 官方组织里有一个 'vue-class-component' 以及连带推荐的 'vue-property-decorator',都没有相应实现.翻了下前者的 issue,有一条挂了好些时间的待

  • 深入理解typescript中的infer关键字的使用

    infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中,在真实分支中引用此推断类型变量,推断待推断的类型. 例如:用infer推断函数的返回值类型 type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type fn = () => number type

  • TypeScript中正确使用interface和type的方法实例

    目录 前言 interface type 附:interface和type不同点 总结 前言 interface 和 type 都是用来定义类型,可以理解定义 shape ,那么 shape 表示一种设计大框,或者说只要具有某些特征或者行为就是为一类事物.在有些面向例如 Java 语言中,interface 用于定义行为,如果一个类实现了某一个 interface 表示该类具有某种行为或者说具有某种能力,例如writable 或者 readable .可以通过行为来对事物进行划分.interfa

  • TypeScript中函数重载写法

    目录 1. 函数签名 2.函数重载 2.1 重载签名是可调用的 2.1 实现签名必须是通用的 3.方法重载 4. 何时使用函数重载 5.总结 前言: 大多数函数接受一组固定的参数.但有些函数可以接受可变数量的参数,不同类型的参数,甚至可以根据你调用函数的方式返回不同的类型.为了注释这样的函数,TypeScript 提供了函数重载功能. 1. 函数签名 我们先来考虑一个函数,它返回给一个特定的人的问候信息. function greet(person: string): string { retu

  • TypeScript中的类

    目录 1.概述 2.定义一个简单的类 3.继承 4.public.private.protected修饰符 4.1getters与setters 5.readonly修饰符 6.静态成员 7.抽象类 8.类与接口 1.概述 类这个概念基本是所有面向对象编程语言都具有一个概念,例如Java.Python等:在JavaScript中ES6 之前是没有类这个概念的,对于熟悉面向对象来程序猿来说有些棘手,因为他们用的都是基于类的继承,对象也是通过类创建出来的.在ES6中添加了类这个概念,虽然只是一个语法

  • 如何在TypeScript中正确的遍历一个对象

    目录 JavaScript TypeScript for...in Object.keys Object.entries 思考 总结 JavaScript 在讲解用 Ts 遍历一个对象之前, 我们先说说 在 Js 中怎么实现, for...in.Object.keys, 一个简单的例子: // for...in const obj = { name: 'itsuki', address: 'hangzhou', }; for (const key in obj) { console.log(ke

  • 在Typescript中如何使用for...in详解

    如何在Typescript中使用for...in ?本人在TS中用for...in出现了些问题,也想到了一些解决方法.那么先来看看下面报错的代码吧. interface ABC { a: string b: string } const x: ABC = { a:'1', b:'2' } const y: ABC = { a:'3', b:'4' } for (const key in x) { // 在类型 "ABC" 上找不到具有类型为 "string" 的参数

  • 如何在TypeScript中处理日期字符串

    目录 前言: 一.模板字面量类型 二.类型谓词缩小范围 三.定义日期字符串 总结: 前言: 在我最近的一个项目中,我必须去处理多个自定义的日期字符串表示法,比如YYYY-MM-DD和YYYYMMDD.由于这些日期是字符串变量,TypeScript默认会推断成为string类型.虽然这在技术实现上没有错,但是在工作中使用这样的类型定义是很宽泛的,使得有效处理这些日期字符串变得很困难.例如,let dog = 'alfie'也被推断为一个string类型. 在这篇文章中,我会将我的解决方法呈现给你,

随机推荐