快捷導(dǎo)航

TypeScript?中使用?getter?和?setter的方法

更新時(shí)間：2023年04月01日 10:17:39 作者：跡憶客

這篇文章主要介紹了TypeScript?中如何使用?getter?和?setter,?getter使我們能夠?qū)傩越壎ǖ皆谠L問屬性時(shí)調(diào)用的函數(shù)，而?setter?將屬性綁定到在嘗試設(shè)置屬性時(shí)調(diào)用的函數(shù)，需要的朋友可以參考下

使用 get 和 set 關(guān)鍵字在 TypeScript 中定義 getter 和 setter。 getter 使我們能夠?qū)傩越壎ǖ皆谠L問屬性時(shí)調(diào)用的函數(shù)，而 setter 將屬性綁定到在嘗試設(shè)置屬性時(shí)調(diào)用的函數(shù)。

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 個(gè) getter 和 setter。

get 語法將對(duì)象屬性綁定到函數(shù)，因此每次訪問該屬性時(shí)，都會(huì)調(diào)用該函數(shù)。

當(dāng)我們?cè)L問類實(shí)例的語言屬性時(shí)，我們調(diào)用的是 language() 方法。

set 語法將對(duì)象屬性綁定到函數(shù)，每次嘗試設(shè)置屬性時(shí)，都會(huì)調(diào)用該函數(shù)。

需要注意的是，盡管我們?cè)诤笈_(tái)調(diào)用類方法，但我們使用 getter 和 setter 就像在對(duì)象上使用常規(guī)屬性一樣。

我們不應(yīng)嘗試將 setter 稱為 myInstance.mySetter('TypeScript')，而應(yīng)將屬性設(shè)置為 myInstance.mySetter = ‘TypeScript’。

請(qǐng)注意，我們?cè)陬愔新暶?_language 和 _tasks 屬性時(shí)使用了 private 關(guān)鍵字。

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;
  }
}

具有私有可見性的類成員只能在類本身內(nèi)部訪問。

這很重要，因?yàn)槲覀儾幌Ｍ覀兊念惖南M(fèi)者能夠訪問 _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

嘗試從類外部訪問私有屬性會(huì)導(dǎo)致錯(cuò)誤，這正是我們需要的，以確保消費(fèi)者按預(yù)期使用 getter 和 setter。

使用下劃線前綴，因?yàn)槲覀冃枰粋€(gè)不同的屬性名稱，以避免我們的 getter 和 setter 方法中的無限循環(huán)。

以下實(shí)現(xiàn)會(huì)導(dǎo)致無限循環(huán)。

class Developer {
  private language = 'TypeScript';

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

const dev = new Developer();

代碼中的問題是 - 我們沒有使用下劃線來為類中的語言屬性添加前綴。

因此，每次調(diào)用 setter 時(shí)，它都會(huì)設(shè)置屬性，并在每次設(shè)置屬性時(shí)不斷調(diào)用自身。

如果我們只為特定屬性定義 getter，則該屬性會(huì)自動(dòng)標(biāo)記為只讀。

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';

我們只為語言屬性分配了一個(gè) getter，因此不能重新分配它。

如果我們沒有顯式鍵入 setter 參數(shù)，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 參數(shù)，TypeScript 仍然知道它是 string 類型，因?yàn)檎Z言 getter 返回一個(gè) string 類型的值。

我們還可以設(shè)置在實(shí)例化類時(shí)使用 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"

實(shí)例化類時(shí)調(diào)用構(gòu)造函數(shù)方法。該方法采用語言參數(shù)并使用已定義的設(shè)置器初始化其值。

如果我們不想使用 setter 在構(gòu)造函數(shù)中初始化屬性，也可以使用 _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 方法為語言屬性設(shè)置初始值，因?yàn)槲覀冊(cè)趯傩郧懊婕由狭讼聞澗€。

到此這篇關(guān)于TypeScript 中如何使用 getter 和 setter的文章就介紹到這了,更多相關(guān)TypeScript 使用 getter 和 setter內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: