TypeScript 中 readonly 的应用场景介绍

什么是 readonly？

在 TypeScript 中，我们可以使用 readonly 关键字来定义只读属性。只读属性是指在定义时就确定了其值，且在运行时不可修改。 readonly 关键字可以用于属性、参数和索引签名。

readonly 的应用场景

对象属性

在 TypeScript 中，我们可以使用 readonly 关键字来定义对象属性，以确保它们在运行时不会被修改。

interface Person {
  readonly name: string;
  age: number;
}

let person: Person = { name: "Alice", age: 30 };
person.age = 32;
person.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property.

在上面的代码中，我们定义了一个 Person 接口，其中 name 属性是只读的。在创建 person 对象时，我们不能修改 name 属性的值。

函数参数

在 TypeScript 中，我们可以使用 readonly 关键字来定义函数参数，以确保它们在函数内部不会被修改。

function printNames(names: readonly string[]) {
  names.push("Charlie"); // Error: Property 'push' does not exist on type 'readonly string[]'.
  console.log(names);
}

let names: string[] = ["Alice", "Bob"];
printNames(names);

在上面的代码中，我们定义了一个 printNames 函数，它接受一个只读的 names 参数。在函数内部，我们不能修改 names 数组的值。

索引签名

在 TypeScript 中，我们可以使用 readonly 关键字来定义索引签名，以确保索引键在运行时不会被修改。

interface PersonMap {
  readonly [id: number]: Person;
}

let people: PersonMap = {
  1: { name: "Alice", age: 30 },
  2: { name: "Bob", age: 32 },
};

people[3] = { name: "Charlie", age: 25 }; // Error: Index signature in type 'PersonMap' only permits reading.

在上面的代码中，我们定义了一个 PersonMap 接口，其中索引键是只读的。在创建 people 对象时，我们不能修改索引键的值。

总结

在 TypeScript 中，readonly 关键字可以用于属性、参数和索引签名，以确保它们在运行时不会被修改。只读属性可以提高代码的可维护性和可读性，避免意外的错误。在编写 TypeScript 代码时，我们应该注意使用 readonly 关键字来定义只读属性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c2ced0add4f0e0ffca3f23