TypeScript 进阶指南：Getter 与 Setter 在现代工程中的演进与实践 (2026版)

2026-02-09 05:30:55 0条评论 2次阅读 0人点赞

在日常的 TypeScript 开发中，我们经常会遇到需要对类的属性访问进行严格控制的情况。也许你曾经遇到过这样的需求：在给一个属性赋值时，必须确保它不为空；或者在读取某个属性时，并不是直接返回存储的值，而是经过某种计算后的结果。如果直接将属性设为 public，虽然简单，但却失去了对这些数据的控制权，导致代码变得脆弱且难以维护。

为了解决这一问题，TypeScript 为我们提供了强大的 Getter（访问器） 和 Setter（修改器） 特性。在这篇文章中，我们将深入探讨如何利用这两个工具来增强代码的封装性和灵活性。你将会学到如何定义它们，如何在 getter 中添加计算逻辑，如何在 setter 中植入验证机制，以及在实际项目中应用它们的最佳实践。

基础概念：为什么我们需要 Getter 和 Setter？

在传统的 JavaScript 对象中，我们通常可以直接通过点符号（.）来读取或修改属性。然而，在面向对象编程（OOP）中，我们通常希望隐藏类的内部实现细节（这就是“封装”）。

Getter 和 Setter 为我们提供了一种受控的方式来访问类属性，它们充当了外部代码与类内部私有数据之间的“守门员”：

  • Getters（访问器）：允许我们在获取属性值时执行特定的逻辑。这意味着我们可以在返回数据之前对其进行格式化、计算或过滤。
  • Setters（修改器）：让我们可以在给属性赋值时进行干预。这是进行数据验证的最佳场所，例如检查数值范围、字符串长度或数据格式是否正确。

初体验：基本语法与用法

让我们从一个最直观的例子开始。在 TypeScript 中，我们通常使用下划线前缀（例如 _name）来约定这是一个私有属性，不应直接被外部访问。

class Person {
  // 定义一个私有属性，外部无法直接访问
  private _name: string;

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

  // Getter：用于读取 name
  get name(): string {
    console.log("正在获取名字...");
    return this._name;
  }

  // Setter：用于设置 name
  set name(newName: string) {
    console.log("正在尝试设置名字...");
    if (newName.length > 0) {
      this._name = newName;
    } else {
      console.error("错误：名字不能为空！");
    }
  }
}

const person = new Person("Alice");

// 访问 person.name 时，实际上是在调用 get name()
console.log(person.name); // 输出: Alice

// 设置 person.name 时，实际上是在调用 set name()
person.name = "Bob";     // 内部逻辑验证通过
console.log(person.name); // 输出: Bob

person.name = "";        // 内部逻辑验证失败，输出错误信息

代码解析：

在这个例子中，我们并没有直接操作 INLINECODE3427de6d。相反，我们使用 INLINECODE1f799c61 这样的属性访问语法。

  • 通过 INLINECODEd01f52d4 方法，我们可以控制对 INLINECODE815d0867 属性的读取操作。比如我们在读取时打印了日志，这在调试时非常有用。
  • 通过 INLINECODE412f8f72 方法，我们可以控制对 INLINECODEe67c3d54 属性的修改。注意看，当我们尝试将名字设置为空字符串时，setter 拦截了这个操作，防止了无效数据的写入。

1. 深入理解 TypeScript 中的 Getter

Getter 是一种特殊的方法，它允许我们以受控的方式检索对象属性的值。你可以把它想象成一个“伪装”成属性的函数。

#### Getter 的核心作用

  • 隐藏内部状态：我们可以将属性标记为 INLINECODE81ddb991，只通过 INLINECODE8cd2ff2a 的 getter 暴露数据，外部代码无法直接修改底层数据。
  • 动态计算属性：这是 getter 最强大的功能之一。很多时候，我们需要的值并不是存储在数据库或字段中的，而是通过其他数据实时计算得来的。

#### 语法结构

class MyClass {
  private _value: someType;

  get propertyName(): returnType {
    // 1. 执行逻辑（计算、格式化、验证权限等）
    // 2. 返回结果
    return this._value;
  }
}
  • propertyName：你想在对象上调用的属性名。
  • returnType：必须明确指定返回值的类型，这与普通方法不同，getter 不需要接收参数。

#### 实战案例：计算矩形面积

让我们看一个只读属性的典型例子。在几何计算中，面积通常是由宽和高计算出来的，而不是存储起来的。如果我们将面积作为一个属性存储，那么一旦宽或高变化，面积就会变得不准确。

class Rectangle {
  private _width: number;
  private _height: number;

  constructor(width: number, height: number) {
    this._width = width;
    this._height = height;
  }

  // 这是一个只读的计算属性
  get area(): number {
    console.log("正在计算面积...");
    // 每次访问时动态计算，保证数据的一致性
    return this._width * this._height;
  }
}

const rectangle = new Rectangle(5, 10);

// 就像访问一个普通属性一样调用
console.log(rectangle.area); // 输出: 50

// 因为没有定义 Setter，所以下面的代码会在编译时报错
// rectangle.area = 100; // Error: Cannot assign to ‘area‘ because it is a read-only property.

深入分析：

  • 这里，INLINECODEa59534d9 属性是只读的，因为我们只定义了 INLINECODE2967c222 而没有定义 set。这为我们提供了一种安全的方式来获取计算值，而无需担心其被意外修改。
  • 每次调用 INLINECODEdf01ad89，代码都会重新执行乘法运算。如果 INLINECODEfba3ea01 或 _height 发生了变化，下次获取面积时会自动得到新值。这就是“单一数据源”原则的体现——我们只存储基本尺寸，面积是派生数据。

2. 深入理解 TypeScript 中的 Setter

Setter 允许我们对类属性的修改进行控制。它通过在将数据赋给私有字段之前提供验证或操作数据的机制，实现了封装性。

#### Setter 的核心作用

  • 数据验证：确保传入的数据符合业务规则（例如年龄不能为负数，邮箱格式必须正确）。
  • 事件触发与副作用：当某个属性改变时，可能需要触发其他操作，例如更新界面、重新计算总价或发送网络请求。

#### 语法结构

class MyClass {
  private _value: someType;

  set propertyName(newValue: type) {
    // 1. 验证 newValue
    // 2. 如果有效，赋值给 this._value
    // 3. 如果无效，抛出错误或执行默认逻辑
  }
}

注意：Setter 的返回值会被忽略，通常我们将其定义为 void。

#### 实战案例：员工姓名验证

在企业级应用中，数据完整性至关重要。让我们看一个包含完整验证逻辑的例子。

class Employee {
  private _fullName: string = ‘‘;

  get fullName(): string {
    return this._fullName;
  }

  set fullName(newName: string) {
    // 在这里我们可以添加复杂的验证逻辑
    if (newName && newName.trim().length > 0) {
      // 我们还可以在赋值前对数据进行处理，比如去除首尾空格
      this._fullName = newName.trim();
      console.log(`员工姓名已更新为: ${this._fullName}`);
    } else {
      // 验证失败时，我们选择不更新值，并给出提示
      console.error(‘错误：无效的姓名。姓名不能为空。‘);
    }
  }
}

const emp = new Employee();

emp.fullName = ‘John Doe‘;
console.log(emp.fullName); // 输出: John Doe

emp.fullName = ‘   ‘;      // 尝试设置空格
emp.fullName = ‘‘;         // 尝试设置空字符串

输出结果：

员工姓名已更新为: John Doe
John Doe
错误：无效的姓名。姓名不能为空。
错误：无效的姓名。姓名不能为空。

在这个例子中，通过 setter，我们有效地防止了“脏数据”进入我们的系统中。

更多实战场景与高级示例

为了让你更全面地掌握 Getter 和 Setter 的用法，让我们来看几个更贴近实际开发的场景。

#### 场景一：验证数值范围（如年龄、库存数量）

假设我们在开发一个电商系统或用户管理系统，经常需要限制数值的范围。

class User {
  private _age: number = 0;

  get age(): number {
    return this._age;
  }

  set age(value: number) {
    // 确保年龄在合理的范围内
    if (value > 0 && value < 150) {
      this._age = value;
    } else {
      console.error(`无效的年龄值: ${value}。请输入 1 到 149 之间的数字。`);
      // 可选：如果验证失败，我们可以保持原值，或者设置一个默认值
      // this._age = 0; 
    }
  }
}

const user = new User();
user.age = 25;
console.log(`用户年龄: ${user.age}`); // 输出: 25

user.age = -5; // 触发错误日志
user.age = 200; // 触发错误日志

#### 场景二：智能属性处理（全名拆分与合并）

有时候，我们存储的数据格式（数据库模型）与展示给用户的格式（UI 模型）是不一样的。Getter 和 Setter 可以完美地处理这种转换。

class Person {
  // 内部存储：分开的姓和名
  private _firstName: string = ‘‘;
  private _lastName: string = ‘‘;

  // 外部接口：全名
  get fullName(): string {
    return `${this._firstName} ${this._lastName}`;
  }

  set fullName(name: string) {
    const parts = name.split(‘ ‘);
    if (parts.length === 2) {
      this._firstName = parts[0];
      this._lastName = parts[1];
    } else {
      console.error(‘全名格式无效，请输入“名 姓”的形式，例如“John Doe”。‘);
    }
  }
}

const person = new Person();
person.fullName = ‘John Doe‘;
console.log(`名: ${person._firstName}, 姓: ${person._lastName}`); // 内部状态已更新

person.fullName = ‘John‘; // 格式错误

#### 场景三：带有缓存的计算属性（性能优化）

虽然 Getter 很方便，但如果计算非常消耗资源（比如遍历一个巨大的数组），我们可能不希望每次访问都重新计算。我们可以结合 Setter 实现一个带有缓存失效机制的逻辑。

class DataProcessor {
  private _rawData: number[] = [];
  private _cachedSum: number | null = null;

  get data(): number[] {
    return this._rawData;
  }

  set data(value: number[]) {
    this._rawData = value;
    // 当数据更新时，清除缓存，强制下次重新计算
    this._cachedSum = null;
  }

  get sum(): number {
    // 如果缓存存在，直接返回，否则进行计算
    if (this._cachedSum === null) {
      console.log("正在执行繁重的计算...");
      this._cachedSum = this._rawData.reduce((a, b) => a + b, 0);
    }
    return this._cachedSum;
  }
}

const processor = new DataProcessor();
processor.data = [10, 20, 30];

console.log(processor.sum); // 第一次调用，执行计算并输出 60
console.log(processor.sum); // 第二次调用，直接从缓存读取，不输出计算日志

processor.data = [1, 2];    // 更新数据，缓存失效
console.log(processor.sum); // 再次更新数据后，重新计算，输出 3

2026 开发者视角：Getter/Setter 与现代 AI 工作流的结合

随着我们步入 2026 年，开发环境发生了深刻的变化。我们不仅是在为人类编写代码，也是在为 AI 辅助工具编写可理解的上下文。在使用 Getter 和 Setter 时，我们需要考虑 “Vibe Coding”（氛围编程） 和 AI 可读性。

#### 为 AI 友好编码：让语义更清晰

在现代 IDE（如 Cursor 或 Windsurf）中，AI 代理会频繁分析你的代码意图。如果你使用传统的 getter/setter，AI 可能会困惑于 INLINECODEab0c6d98 和 INLINECODE7f526a77 的区别。

最佳实践： 使用更有意义的命名或在注释中显式标记意图，这有助于 AI 在生成代码或重构时保持逻辑的一致性。

class SmartComponent {
  private _isLoading: boolean = false;

  // AI 提示：当状态变为 loading 时，自动禁用交互
  set isLoading(state: boolean) {
    this._isLoading = state;
    // 副作用：通知外部观察者或更新 UI 状态
    this.emit("stateChange", state);
  }

  get isLoading(): boolean {
    return this._isLoading;
  }
}

当我们与结对编程的 AI 聊天时，我们可以这样描述需求：“当 INLINECODE9aeb7703 被设置为 true 时，确保触发 INLINECODE0d6428e0 事件。”。明确的 Setter 逻辑使得 AI 能够更准确地理解和实现这些需求，而不是把它们分散在各个函数中。

#### 技术债务与现代重构：Proxy 的崛起

虽然原生的 Getter/Setter 非常适合强类型的类验证，但在 2026 年的响应式框架（如基于 Signal 的框架）或状态管理库中，我们看到了 Proxy 对象的广泛应用。

如果你发现自己在写大量的样板代码来为每个属性定义 getter/setter，也许你应该考虑使用 Proxy 来动态拦截操作。但这并不意味着 Getter/Setter 过时了。相反，对于核心业务逻辑中的不变性和显式验证，直接在类中定义 Getter/Setter 仍然是最稳健、最容易调试的方式。

决策经验：

  • 使用 Getter/Setter：当你需要明确的类型检查、计算属性或简单的验证时。
  • 使用 Proxy：当你需要动态地处理未知属性，或者想要构建一个通用的观察系统时。

常见错误与最佳实践

在使用 Getter 和 Setter 时，有几个陷阱是你需要避免的：

  • 避免在 Setter 中触发过于复杂的副作用：虽然在 Setter 中可以触发副作用（比如发送 API 请求），但这通常会导致代码难以调试。保持 Setter 的职责单一——主要负责验证和赋值。
  • 不要循环调用：不要在 Getter 中调用它自己，或者在 Setter 中再次设置同一个属性，这会导致“栈溢出”错误。
  • 性能考量：对于简单的属性访问，使用 Getter 通常不会有性能问题。但在高频调用的循环中，如果 Getter 中包含复杂的计算，可能会成为性能瓶颈。此时应考虑缓存策略（如场景三所示）。

总结

通过这篇文章，我们深入探讨了 TypeScript 中 Getter 和 Setter 的使用方法。从基本的语法到复杂的实战应用，再到 2026 年的 AI 辅助开发视角，我们可以看到，它们不仅仅是访问属性的语法糖，更是实现数据封装、验证和维护内部一致性的强大工具。

掌握这些技巧，将帮助你写出更加健壮、专业且易于维护的 TypeScript 代码。下次当你需要对属性的读写进行控制时，不妨试试使用 Getter 和 Setter 来优雅地解决问题。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/38628.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年