脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → TypeScript 使用getter和setter

TypeScript 中使用 getter 和 setter的方法

 更新时间：2023年04月01日 10:17:39   作者：迹忆客  
这篇文章主要介绍了TypeScript 中如何使用 getter 和 setter, getter使我们能够将属性绑定到在访问属性时调用的函数，而 setter 将属性绑定到在尝试设置属性时调用的函数，需要的朋友可以参考下

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

class Developer {
  private _language = '';
  private _tasks: string[] = [];

  get language() {
    return this._language;
  }

  set language(value: string) {
    this._language = value;
  }

  get tasks() {
    return this._tasks;
  }

  set tasks(value: string[]) {
    this._tasks = value;
  }
}

const dev = new Developer();

dev.language = 'TypeScript';
console.log(dev.language); // 👉️ "TypeScript"

dev.tasks = ['develop', 'test'];
dev.tasks.push('ship');

console.log(dev.tasks); // ['develop', 'test', 'ship']

Developer 类有 2 个 getter 和 setter。

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

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

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

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

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

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

class Developer {
  private _language = '';
  private _tasks: string[] = [];

  get language() {
    return this._language;
  }

  set language(value: string) {
    this._language = value;
  }

  get tasks() {
    return this._tasks;
  }

  set tasks(value: string[]) {
    this._tasks = value;
  }
}

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

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

class Developer {
  private _language = '';
  private _tasks: string[] = [];

  get language() {
    return this._language;
  }

  set language(value: string) {
    this._language = value;
  }

  get tasks() {
    return this._tasks;
  }

  set tasks(value: string[]) {
    this._tasks = value;
  }
}

const dev = new Developer();

// ⛔️ Error: Property '_language' is private
// and only accessible within class 'Developer'.ts(2341)
console.log(dev._language);

TypeScript 中使用 getter 和 setter

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

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

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

class Developer {
  private language = 'TypeScript';

  set language(value: string) {
    // ⛔️ Error: Maximum call stack exceeded
    this.language = value;
  }
}

const dev = new Developer();

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

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

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

class Developer {
  private _language = 'TypeScript';

  get language() {
    return this._language;
  }
}

const dev = new Developer();

console.log(dev.language); // 👉️ "TypeScript"

// ⛔️ Cannot assign to 'language' because
//it is a read-only property.ts(2540)
dev.language = 'TypeScript';

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

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

class Developer {
  private _language = '';

  get language() {
    return this._language;
  }

  // 👇️ (parameter) value: string (inferred)
  // from getter return type
  set language(value) {
    this._language = value;
  }
}

const dev = new Developer();

dev.language = 'TypeScript';

console.log(dev.language); // 👉️ "TypeScript"

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

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

class Developer {
  private _language = '';

  // 👇️ use a constructor method
  constructor(language: string) {
    this.language = language;
  }

  get language() {
    return this._language;
  }

  set language(value: string) {
    this._language = value;
  }
}

const dev = new Developer('TypeScript');

console.log(dev.language); // 👉️ "TypeScript"

dev.language = 'JavaScript';

console.log(dev.language); // 👉️ "JavaScript"

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

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

class Developer {
  private _language = '';

  constructor(language: string) {
    // 👇️ Not using setter (_language instead of language)
    this._language = language;
  }

  get language() {
    return this._language;
  }

  set language(value: string) {
    this._language = value;
  }
}

const dev = new Developer('TypeScript');

console.log(dev.language); // 👉️ "TypeScript"

dev.language = 'JavaScript';

console.log(dev.language); // 👉️ "JavaScript"

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

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

您可能感兴趣的文章:

相关文章

  • 深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点

    才华横溢的Stoyan Stefanov，在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript模式)中，我想要是为我们的读者贡献其摘要，那会是件很美妙的事情
    2012-01-01
  • js数组的基本使用总结

    js数组的基本使用总结

    这篇文章主要给大家介绍了关于js数组的基本使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • javascript实现查询商品功能

    javascript实现查询商品功能

    这篇文章主要为大家详细介绍了javascript实现查询商品功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Underscore之Array_动力节点Java学院整理

    Underscore之Array_动力节点Java学院整理

    这篇文章主要为大家详细介绍了Underscore之Array的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 简单了解微信小程序的目录结构

    简单了解微信小程序的目录结构

    这篇文章主要介绍了简单了解小程序的目录结构，在开发小程序之前，我们首先需要对其目录结构进行了解，以便于提升开发效率,需要的朋友可以参考下
    2019-07-07
  • 关于JavaScript中forEach和each用法浅析

    关于JavaScript中forEach和each用法浅析

    这篇文章主要给大家介绍了关于JavaScript中forEach和each使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • 详解JavaScript如何有效取消HTTP请求

    详解JavaScript如何有效取消HTTP请求

    在Web开发中,取消HTTP请求是一项关键任务,所以本文为大家介绍了如何使用XMLHttpRequest、Fetch和Axios这三种常用的HTTP请求方式来实现取消请求的功能,需要的可以参考下
    2023-09-09
  • 浅谈Javascript中的12种DOM节点类型

    浅谈Javascript中的12种DOM节点类型

    DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。本文将主要说明DOM节点类型，有需要的可以参考借鉴。
    2016-08-08
  • JS使用定时器与事件监听实现轮播图切换功能

    JS使用定时器与事件监听实现轮播图切换功能

    现在很多网站都有轮播图,下面这篇文章主要给大家介绍了关于JS如何使用定时器与事件监听实现轮播图切换功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • js中的reduce()函数讲解

    js中的reduce()函数讲解

    今天小编就为大家分享一篇关于js中的reduce()函数讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论