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

也想出现在这里？点击联系我~

TypeScript 中 const 与 readonly 的区别?

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

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

TypeScript 中 readonly

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

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

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

1. //函数
2. functionfoo(config:{readonlynum:number}){
3. //..
4. }
5. constconfig={num:123}
6. foo(config)

区别

• const 用于变量， readonly 用于属性
• const 在运行时检查， readonly 在编译时检查
• const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值; readonly 修饰的属性能确保自身不能修改属性，但是当你把这个属性交给其它并没有这种保证的使用者(允许出于类型兼容性的原因)，他们能改变

1. constfoo:{
2. readonlybar:number;
3. }={
4. bar:123
5. };
7. functioniMutateFoo(foo:{bar:number}){
8. foo.bar=456;
9. }
11. iMutateFoo(foo);
12. console.log(foo.bar);//456

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

1. functioniTakeFoo(foo:Foo){
2. foo.bar=456;//Error:bar属性只读
3. }

• const 保证的不是变量的值不得改动，而是变量指向的那个内存地址不得改动，例如使用 const 变量保存的数组，可以使用 push ， pop 等方法。但是如果使用 ReadonlyArray 声明的数组不能使用 push ， pop 等方法。

枚举和常量枚举的区别?

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

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

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

区别

• 枚举会被编译时会编译成一个对象，可以被当作对象使用
• const 枚举会在 typescript 编译期间被删除，const 枚举成员在使用的地方会被内联进来，避免额外的性能开销

1. //枚举
2. enumColor{
3. Red,
4. Green,
5. Blue
6. }
8. varsisterAn=Color.Red
9. //会被编译成JavaScript中的varsisterAn=Color.Red
10. //即在运行执行时，它将会查找变量Color和Color.Red

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

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

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