前端面试题118（如何在TypeScript中处理只读属性？请提供一个示例来说明）

在TypeScript中，您可以使用readonly关键字来标记对象的某些属性为只读，这意味着一旦这些属性被初始化后，就不能再修改它们的值。这对于确保数据的不变性和提高代码的可维护性非常有帮助。下面是一个如何在TypeScript中定义和使用带有只读属性的对象的例子：

定义带有只读属性的接口

首先，您可以通过定义一个接口来指定哪些属性是只读的。这里我们定义一个Person接口，其中id属性被声明为只读：

interface Person {
  readonly id: number;
  name: string;
  age?: number; // 可选属性，非只读
}

初始化只读属性

然后，当创建实现了这个接口的类或对象字面量时，需要在构造函数或其他初始化逻辑中为只读属性分配初始值。对于类，可以在构造函数中设置只读属性：

class Employee implements Person {
  readonly id: number;
  name: string;
  age?: number;

  constructor(id: number, name: string, age?: number) {
    this.id = id; // 只读属性必须在构造函数中初始化
    this.name = name;
    this.age = age;
  }

  // 尝试修改只读属性会引发编译错误
  // setId(newId: number) {
  //   this.id = newId; // Error: Cannot assign to 'id' because it is a read-only property.
  // }
}

// 创建Employee实例
const employee = new Employee(1, "Alice", 30);

// 尝试修改只读属性id也会在运行时阻止（如果编译器允许的话，但默认是不允许的）
// employee.id = 2; // 类似的，这会在编译阶段报错

对象字面量

如果您直接使用对象字面量来实现接口，同样需要在创建时就为只读属性赋值：

const person: Person = {
  readonly id: 2, // 注意：这里的readonly是错误的用法，应直接赋值
  name: "Bob",
  age: 25
};

// 上面的写法有误，正确的是直接赋值，无需readonly关键字
const correctPerson: Person = {
  id: 2,
  name: "Bob",
  age: 25
};

// correctPerson.id = 3; // 这里尝试修改id会引发编译错误

请注意，在对象字面量中直接使用readonly关键字是不正确的语法。只读属性的声明应该在接口或类中完成，实际创建对象时通过初始化来遵守这一规则。