TypeScript 中如何使用 readonly 属性-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，我们可以使用 readonly 关键字来声明只读属性。只读属性只能在声明时或构造函数中被赋值，一旦赋值后就不能再被修改。在本文中，我们将探讨如何在 TypeScript 中使用 readonly 属性。

什么是 readonly 属性

readonly 是 TypeScript 中的一个关键字，用于声明只读属性。只读属性只能在声明时或构造函数中被赋值，一旦赋值后就不能再被修改。

-- -------------------- ---- -------
----- ------ -
  -------- ----- -------

  ----------------- ------- -
    --------- - -----
  -

  ------------ -
    -- -------------- ------ -
    --------- - ---- ------
  -
-

在上面的示例中，我们声明了一个 Person 类，并将 name 属性声明为只读属性。在构造函数中，我们可以给 name 属性赋值，但在 changeName 方法中，我们试图修改 name 属性的值，这将会导致编译错误。

如何使用 readonly 属性

在 TypeScript 中，我们可以使用 readonly 关键字来声明只读属性。只读属性只能在声明时或构造函数中被赋值，一旦赋值后就不能再被修改。

class Person {
  readonly name: string;

  constructor(name: string) {
    this.name = name;
  }
}

在上面的示例中，我们声明了一个 Person 类，并将 name 属性声明为只读属性。在构造函数中，我们可以给 name 属性赋值，但不能在其他地方修改它的值。

const person = new Person('张三');
console.log(person.name); // 输出：张三

// 编译错误：无法分配到只读属性 'name' 上
person.name = '李四';

在上面的示例中，我们创建了一个 Person 实例，并输出了它的 name 属性。然后我们试图修改 name 属性的值，这将会导致编译错误。

readonly vs const

在 TypeScript 中，readonly 关键字用于声明只读属性，而 const 关键字用于声明只读变量。它们的区别在于：

readonly 用于类属性、接口属性、构造函数参数和函数参数。
const 用于变量声明。

-- -------------------- ---- -------
----- ------ -
  -------- ----- -------

  -------------------- ---- ------- ----- ------- -
    --------- - -----
  -
-

--------- ---- -
  -------- --- -------
  ----- -------
-

-------- ------------ -- ------- -
  -- ---
-

----- ---- ------ - ------

在上面的示例中，我们展示了如何在不同的场景中使用 readonly 和 const 关键字。

总结

在 TypeScript 中，我们可以使用 readonly 关键字来声明只读属性。只读属性只能在声明时或构造函数中被赋值，一旦赋值后就不能再被修改。readonly 用于类属性、接口属性、构造函数参数和函数参数，而 const 用于变量声明。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/662d3671d3423812e4ab44b0