个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章TypeScript 中 Const 和 Readonly 的区别？枚举和常量枚举的区别？由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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. } 
  5. const config = { num: 123 } 
  6. 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.  
  11. iMutateFoo(foo); 
  12. console.log(foo.bar); // 456 

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

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

枚举和常量枚举的区别？

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

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

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

区别 。

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

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

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

原文地址：https://mp.weixin.qq.com/s/HXufpHESqNWQyy2ZMmyq3A 。

最后此篇关于TypeScript 中 Const 和 Readonly 的区别？枚举和常量枚举的区别？的文章就讲到这里了,如果你想了解更多关于TypeScript 中 Const 和 Readonly 的区别？枚举和常量枚举的区别？的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： Android编程实现监控apk安装，卸载，替换的方法
文章推荐： opencv实现图形轮廓检测
文章推荐： 说说React服务端渲染怎么做？原理是什么？
文章推荐： C语言实现输入两个数字将其按从小到大输出的方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com