首页 > 网络编程 > JavaScript > TypeScript 中使用 getter 和 setter的方法

TypeScript 中使用 getter 和 setter的方法

福牛 4月 01, 2023 37 0

使用 get 和 set 关键字在 TypeScript 中定义 getter 和 setter。 getter 使我们能够将属性绑定到在访问属性时调用的函数，而 setter 将属性绑定到在尝试设置属性时调用的函数。

  1. class Developer {
  2.      private _language = ”;
  3.      private _tasks: string[] = [];
  4.  
  5.      get language() {
  6.      return this._language;
  7.      }
  8.  
  9.      set language(value: string) {
  10.      this._language = value;
  11.      }
  12.  
  13.      get tasks() {
  14.      return this._tasks;
  15.      }
  16.  
  17.      set tasks(value: string[]) {
  18.      this._tasks = value;
  19.      }
  20. }
  21.  
  22. const dev = new Developer();
  23.  
  24. dev.language = ‘TypeScript’;
  25. console.log(dev.language); // ️ “TypeScript”
  26.  
  27. dev.tasks = [‘develop’, ‘test’];
  28. dev.tasks.push(‘ship’);
  29.  
  30. console.log(dev.tasks); // [‘develop’, ‘test’, ‘ship’]
  31.  

Developer 类有 2 个 getter 和 setter。

get 语法将对象属性绑定到函数，因此每次访问该属性时，都会调用该函数。

当我们访问类实例的语言属性时，我们调用的是 language() 方法。

set 语法将对象属性绑定到函数，每次尝试设置属性时，都会调用该函数。

需要注意的是，尽管我们在后台调用类方法，但我们使用 getter 和 setter 就像在对象上使用常规属性一样。

我们不应尝试将 setter 称为 myInstance.mySetter('TypeScript')，而应将属性设置为 myInstance.mySetter = ‘TypeScript’。

请注意，我们在类中声明 _language 和 _tasks 属性时使用了 private 关键字。

  1. class Developer {
  2.      private _language = ”;
  3.      private _tasks: string[] = [];
  4.  
  5.      get language() {
  6.      return this._language;
  7.      }
  8.  
  9.      set language(value: string) {
  10.      this._language = value;
  11.      }
  12.  
  13.      get tasks() {
  14.      return this._tasks;
  15.      }
  16.  
  17.      set tasks(value: string[]) {
  18.      this._tasks = value;
  19.      }
  20. }

具有私有可见性的类成员只能在类本身内部访问。

这很重要，因为我们不希望我们的类的消费者能够访问 _language 和 _tasks 属性。

  1. class Developer {
  2.      private _language = ”;
  3.      private _tasks: string[] = [];
  4.  
  5.      get language() {
  6.      return this._language;
  7.      }
  8.  
  9.      set language(value: string) {
  10.      this._language = value;
  11.      }
  12.  
  13.      get tasks() {
  14.      return this._tasks;
  15.      }
  16.  
  17.      set tasks(value: string[]) {
  18.      this._tasks = value;
  19.      }
  20. }
  21.  
  22. const dev = new Developer();
  23.  
  24. // ⛔️ Error: Property ‘_language’ is private
  25. // and only Accessible within class ‘Developer’.ts(2341)
  26. console.log(dev._language);

-1

尝试从类外部访问私有属性会导致错误，这正是我们需要的，以确保消费者按预期使用 getter 和 setter。

使用下划线前缀，因为我们需要一个不同的属性名称，以避免我们的 getter 和 setter 方法中的无限循环。

以下实现会导致无限循环。

  1. class Developer {
  2.      private language = ‘TypeScript’;
  3.  
  4.      set language(value: string) {
  5.      // ⛔️ Error: Maximum call stack exceeded
  6.      this.language = value;
  7.      }
  8. }
  9.  
  10. const dev = new Developer();

代码中的问题是 – 我们没有使用下划线来为类中的语言属性添加前缀。

因此，每次调用 setter 时，它都会设置属性，并在每次设置属性时不断调用自身。

如果我们只为特定属性定义 getter，则该属性会自动标记为只读。

  1. class Developer {
  2.      private _language = ‘TypeScript’;
  3.  
  4.      get language() {
  5.      return this._language;
  6.      }
  7. }
  8.  
  9. const dev = new Developer();
  10.  
  11. console.log(dev.language); // ️ “TypeScript”
  12.  
  13. // ⛔️ Cannot assign to ‘language’ because
  14. //it is a read-only property.ts(2540)
  15. dev.language = ‘TypeScript’;

我们只为语言属性分配了一个 getter，因此不能重新分配它。

如果我们没有显式键入 setter 参数，TypeScript 能够从 getter 的返回类型推断它。

  1. class Developer {
  2.      private _language = ”;
  3.  
  4.      get language() {
  5.      return this._language;
  6.      }
  7.  
  8.      // ️ (parameter) value: string (inferred)
  9.      // from getter return type
  10.      set language(value) {
  11.      this._language = value;
  12.      }
  13. }
  14.  
  15. const dev = new Developer();
  16.  
  17. dev.language = ‘TypeScript’;
  18.  
  19. console.log(dev.language); // ️ “TypeScript”

即使我们没有在 setter 中显式键入 value 参数，TypeScript 仍然知道它是 string 类型，因为语言 getter 返回一个 string 类型的值。

我们还可以设置在实例化类时使用 getter 和 setter 的属性的值。

  1. class Developer {
  2. private _language = ”;
  3.  
  4.      // ️ use a constructor method
  5.      constructor(language: string) {
  6.      this.language = language;
  7.      }
  8.  
  9.      get language() {
  10.      return this._language;
  11.      }
  12.  
  13.      set language(value: string) {
  14.      this._language = value;
  15.      }
  16. }
  17.  
  18. const dev = new Developer(‘TypeScript’);
  19.  
  20. console.log(dev.language); // ️ “TypeScript”
  21.  
  22. dev.language = ‘JavaScript’;
  23.  
  24. console.log(dev.language); // ️ “javascript“

实例化类时调用构造函数方法。 该方法采用语言参数并使用已定义的设置器初始化其值。

如果我们不想使用 setter 在构造函数中初始化属性，也可以使用 _language 属性。

  1. class Developer {
  2.      private _language = ”;
  3.  
  4.      constructor(language: string) {
  5.      // ️ Not using setter (_language instead of language)
  6.      this._language = language;
  7.      }
  8.  
  9.      get language() {
  10.      return this._language;
  11.      }
  12.  
  13.      set language(value: string) {
  14.      this._language = value;
  15.      }
  16. }
  17.  
  18. const dev = new Developer(‘TypeScript’);
  19.  
  20. console.log(dev.language); // ️ “TypeScript”
  21.  
  22. dev.language = ‘JavaScript’;
  23.  
  24. console.log(dev.language); // ️ “JavaScript”

上面的示例没有使用 setter 方法为语言属性设置初始值，因为我们在属性前面加上了下划线。

到此这篇关于TypeScript 中如何使用 getter 和 setter的文章就介绍到这了,更多相关TypeScript 使用 getter 和 setter内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论