TypeScript 中 Const 和 Readonly 的区别?枚举和常量枚举的区别?

开发 前端
ypeScript 中的只读修饰符,可以声明更加严谨的可读属性,通常在 interface 、 Class 、 type 以及 array 和 tuple 类型中使用它,也可以用来定义一个函数的参数。

[[415240]]

本文转载自微信公众号「三分钟学前端」,作者sisterAn 。转载本文请联系三分钟学前端公众号。

TypeScript 中 const 与 readonly 的区别?

TypeScript 中不可变量的实现方法有两种:

  • 使用 ES6 的 const 关键字声明的值类型
  • 被 readonly 修饰的属性

TypeScript 中 readonly

TypeScript 中的只读修饰符,可以声明更加严谨的可读属性

通常在 interface 、 Class 、 type 以及 array 和 tuple 类型中使用它,也可以用来定义一个函数的参数

  1. // type 
  2. type Foo = { 
  3.   readonly bar: number; 
  4. }; 
  5. // const 确保 'config' 不能够被改变了 
  6. const foo: Foo = { bar: 123 }; 
  7. // 不能被改变 
  8. foo.bar = 456; // Error: foo.bar 为仅读属性 
  1. // 函数 
  2. function foo(config: { readonly num: number }) { 
  3.   // .. 
  4. const config = { num: 123 } 
  5. foo(config) 

区别

  • const 用于变量, readonly 用于属性
  • const 在运行时检查, readonly 在编译时检查
  • const 声明的变量不得改变值,这意味着,const 一旦声明变量,就必须立即初始化,不能留到以后赋值; readonly 修饰的属性能确保自身不能修改属性,但是当你把这个属性交给其它并没有这种保证的使用者(允许出于类型兼容性的原因),他们能改变
  1. const foo: { 
  2.   readonly bar: number; 
  3. } = { 
  4.   bar: 123 
  5. }; 
  6.  
  7. function iMutateFoo(foo: { bar: number }) { 
  8.   foo.bar = 456; 
  9.  
  10. iMutateFoo(foo); 
  11. console.log(foo.bar); // 456 

此时,需要 iMutateFoo 明确的表示,他们的参数不可修改,那么编译器会发出错误警告:

  1. function iTakeFoo(foo: Foo) { 
  2.   foo.bar = 456; // Error: bar 属性只读 
  • const 保证的不是变量的值不得改动,而是变量指向的那个内存地址不得改动,例如使用 const 变量保存的数组,可以使用 push , pop 等方法。但是如果使用 ReadonlyArray 声明的数组不能使用 push , pop 等方法。

枚举和常量枚举的区别?

枚举和常量枚举(const枚举)

使用枚举可以清晰地表达意图或创建一组有区别的用例

  1. // 枚举 
  2. enum Color { 
  3.   Red, 
  4.   Green, 
  5.   Blue 
  6.  
  7. // 常量枚举 
  8. const enum Color { 
  9.   Red, 
  10.   Green, 
  11.   Blue 

区别

  • 枚举会被编译时会编译成一个对象,可以被当作对象使用
  • const 枚举会在 typescript 编译期间被删除,const 枚举成员在使用的地方会被内联进来,避免额外的性能开销
  1. // 枚举 
  2. enum Color { 
  3.   Red, 
  4.   Green, 
  5.   Blue 
  6.  
  7. var sisterAn = Color.Red 
  8. // 会被编译成 JavaScript 中的 var sisterAn = Color.Red 
  9. // 即在运行执行时,它将会查找变量 Color 和 Color.Red 

  1. // 常量枚举 
  2. const enum Color { 
  3.   Red, 
  4.   Green, 
  5.   Blue 
  6.  
  7. var sisterAn = Color.Red 
  8. // 会被编译成 JavaScript 中的 var sisterAn = 0 
  9. // 在运行时已经没有 Color 变量 

来源:https://github.com/Advanced-Frontend/Daily-Interview-Question

 

责任编辑:武晓燕 来源: 三分钟学前端
相关推荐

2009-08-17 18:04:49

C# 枚举

2009-08-27 10:54:09

C# const和st

2009-10-12 16:56:36

VB.NET常量VB.NET枚举

2020-11-19 08:04:10

JS变量Const

2011-04-11 13:00:08

C++结构体枚举

2023-12-07 11:47:00

TypeScript特殊值

2022-05-06 09:21:21

TypeScriptinterfacetype

2022-02-25 09:19:32

TypeScript辅助函数枚举

2022-09-02 09:02:44

TypeInterface

2023-10-12 08:25:18

Javaequals内存

2022-04-07 16:03:36

JavaScriptTypeScript

2010-11-22 12:59:30

MySQL字段

2022-01-07 08:24:13

STM32枚举结构体

2010-08-30 10:32:38

SPANDIV

2012-03-01 14:04:03

Java

2010-09-01 15:11:09

linkimportCSS

2015-08-10 10:58:53

dompropertyattribute

2010-09-08 09:33:09

CSSlink@import

2011-04-20 09:07:44

Ubuntuuseraddadduser

2009-06-29 18:32:30

Hibernate
点赞
收藏

51CTO技术栈公众号