我整理的一些关于【CRI】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

 https://d.51cto.com/xltfov

TypeScript 中 const 和 readonly 的区别

在 TypeScript 中，const 和 readonly 是两个常常被互换使用的概念，尤其是在定义不变类型时。然而，它们的用法和语意有着显著的区别。本文将深入分析这两种类型的不同，并提供相关代码示例。

一、const 的概念

const 是 JavaScript 和 TypeScript 中用于声明常量的关键字。一旦用 const 声明了一个变量，它就无法被重新赋值。需要注意的是，const 只影响变量的绑定，意味着对象的属性仍然可以被更改。

示例：const 的用法
const constantValue = 10;
console.log(constantValue); // 输出: 10

// constantValue = 20; // 错误！不能重新赋值

const obj = { name: "Alice" };
obj.name = "Bob"; // 这是允许的，因为我们并没有改变 obj 的引用
console.log(obj.name); // 输出: Bob
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

在上面的示例中，变量 constantValue 被声明为 const，因此无法重新赋值。而对象 obj 的属性虽然使用 const 声明，但其内部的状态是可以变化的。

二、readonly 的概念

与 const 不同，readonly 是一个属性修饰符，通常与接口或类结合使用。声明为 readonly 的属性在初始化后无法被更改。这使得 readonly 在定义不可变对象时非常有用。

示例：readonly 的用法
interface Person {
    readonly name: string;
    readonly age: number;
}

const person: Person = { name: "Alice", age: 30 };

console.log(person.name); // 输出: Alice

// person.name = "Bob"; // 错误！不能修改 readonly 属性
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

在以上代码中，属性 name 和 age 被标记为 readonly，这意味着一旦 person 对象被创建，这些属性就无法被修改。

三、const 和 readonly 的对比

  1. 适用范围：

    • const 可用于变量声明，不限于对象的属性。
    • readonly 主要用于对象属性，不能直接用于变量声明。

  2. 影响程度：

    • const 保证变量的绑定不变，但对象的属性仍然可以改变。
    • readonly 保证了属性的不可变性，包括对象的属性。

  3. 赋值规则：

    • 使用 const 声明的变量不能被重新赋值。
    • 使用 readonly 修饰的属性在初始化后不能被修改。

四、状态图

为了更清晰地理解 const 和 readonly 的区别，我们使用状态图来展示它们的属性及状态转换。

修改变量 修改对象属性 修改属性 ConstState NotConst MutableObject ReadonlyState NotReadonly

在这个状态图中，我们看到 const 和 readonly 的状态转变。const 声明的变量不能被修改，但其对象的属性可能会改变；而 readonly 属性在初始化后不能被修改。

五、何时使用 const 和 readonly

  • 使用 const：

    • 当你想声明一个不需要重新赋值的变量时，使用 const 是合适的。
    • 对于简单的值或对象引用，const 可以提供足够的保护。

  • 使用 readonly：

    • 在数据模型或对象中，当你希望确保对象的某些属性在创建后不被修改时，应使用 readonly。
    • 它有助于维护代码的可预测性和安全性，特别是在大型代码库中。

六、总结

综上所述，const 和 readonly 在 TypeScript 中分别针对变量声明和属性修饰提供了不同的功能。const 用于确保变量的绑定不会发生变化，而 readonly 则用于确保对象属性的不可变性。了解这两者的区别和适用场景，将有助于开发者编写出可靠且易于维护的代码。

在使用 TypeScript 时，谨慎选择 const 或 readonly 可以有效防止意外修改数据，提升代码质量，从而为日后的维护打下良好的基础。希望本文能够帮助你在 TypeScript 的开发中更好地使用这两种特性。

整理的一些关于【CRI】的项目学习资料（附讲解～～），需要自取：

 https://d.51cto.com/xltfov