跳到主要内容

TypeScript 只读属性

在 TypeScript 中，只读属性是一种特殊的属性，它允许你在对象初始化后防止其值被修改。这种特性在需要确保某些数据不可变时非常有用，尤其是在处理配置对象或常量数据时。

什么是只读属性？​

只读属性是指在对象创建后不能被重新赋值的属性。它们通常用于定义那些在初始化后不应更改的值。TypeScript 提供了 readonly 修饰符来实现这一点。

基本语法​

在 TypeScript 中，你可以通过在属性名前添加 readonly 关键字来定义一个只读属性：

typescript
interface User {
  readonly id: number;
  name: string;
}

在这个例子中，id 是一个只读属性，而 name 是一个普通属性。

示例代码​

typescript
const user: User = {
  id: 1,
  name: "Alice"
};

user.name = "Bob"; // 允许修改
user.id = 2; // 错误：无法分配到 "id"，因为它是只读属性

在这个例子中，user.name 可以被修改，但 user.id 不能被修改，因为它是一个只读属性。

只读属性的实际应用​

只读属性在许多场景中都非常有用，尤其是在需要确保某些数据在初始化后不会被修改的情况下。以下是一些常见的应用场景：

1. 配置对象​

在处理配置对象时，通常希望某些配置项在初始化后保持不变。使用只读属性可以确保这些配置项不会被意外修改。

typescript
interface AppConfig {
  readonly apiUrl: string;
  readonly maxRetries: number;
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  maxRetries: 3
};

config.apiUrl = "https://new-api.example.com"; // 错误：无法分配到 "apiUrl"，因为它是只读属性

2. 常量数据​

在处理常量数据时，只读属性可以确保这些数据不会被修改。

typescript
interface Constants {
  readonly PI: number;
  readonly E: number;
}

const constants: Constants = {
  PI: 3.14159,
  E: 2.71828
};

constants.PI = 3.14; // 错误：无法分配到 "PI"，因为它是只读属性

3. 不可变对象​

在某些情况下，你可能希望整个对象都是不可变的。你可以将所有属性都标记为只读。

typescript
interface ImmutablePoint {
  readonly x: number;
  readonly y: number;
}

const point: ImmutablePoint = {
  x: 10,
  y: 20
};

point.x = 15; // 错误：无法分配到 "x"，因为它是只读属性

只读数组和元组​

TypeScript 还支持只读数组和只读元组。你可以使用 ReadonlyArray 或 readonly 修饰符来定义只读数组。

只读数组​

typescript
const numbers: ReadonlyArray<number> = [1, 2, 3, 4];

numbers.push(5); // 错误：类型“readonly number[]”上不存在属性“push”
numbers[0] = 10; // 错误：无法分配到 "0"，因为它是只读属性

只读元组​

typescript
const point: readonly [number, number] = [10, 20];

point[0] = 15; // 错误：无法分配到 "0"，因为它是只读属性

总结​

只读属性是 TypeScript 中一个非常有用的特性，它可以帮助你确保某些数据在初始化后不会被修改。通过使用 readonly 修饰符，你可以定义只读属性、只读数组和只读元组，从而在开发中实现更安全、更可靠的代码。

提示

在实际开发中，尽量将那些不应被修改的属性标记为只读，这样可以减少意外的错误，并提高代码的可维护性。

附加资源与练习​

  • 练习 1: 创建一个包含只读属性的接口，并尝试修改这些属性，观察 TypeScript 的错误提示。
  • 练习 2: 使用只读数组和只读元组，尝试修改它们的元素，观察 TypeScript 的错误提示。
  • 资源: TypeScript 官方文档 - 只读属性

通过以上内容，你应该已经掌握了 TypeScript 中只读属性的基本概念和实际应用。继续练习并尝试在你的项目中使用只读属性，以提高代码的健壮性和可维护性。