TypeScript?中使用?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就像在對象上使用常規(guī)屬性一樣。
我們不應嘗試將 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);
嘗試從類外部訪問私有屬性會導致錯誤，這正是我們需要的，以確保消費者按預期使用 getter 和 setter。
使用下劃線前綴，因為我們需要一個不同的屬性名稱，以避免我們的 getter 和 setter 方法中的無限循環(huán)。
以下實現會導致無限循環(huán)。
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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇關于css3 動畫卡頓性能優(yōu)化的完美解決方案，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-09-09
在我這幾天的工作中遇到了一個問題，我有一個可編輯的div，并且在DIV里面還有一個可編輯的span，我想要讓span能響應鍵盤事，想實現這種效果，應該如何實踐呢2012-11-11
這篇文章主要為大家詳細介紹了基于JavaScript實現飄落星星特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了多種方式實現js圖片預覽,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JavaScript基于數組實現的棧與隊列操作,結合實例形式分析了棧與隊列的操作原理及javascript使用數組實現棧與隊列的相關技巧,需要的朋友可以參考下2018-12-12
定時器(setTimeout/setInterval)調用帶參函數失效解決方法
setInterval()方法可按照指定的周期（以毫秒計）來調用函數或計算表達式,setTimeout()方法用于在指定的毫秒數后調用函數或計算表達式，詳細使用方法可以參考下本文2013-03-03
這篇文章主要為大家介紹了llqrcode js識別二維碼解析二維碼信息實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
本文給大家介紹使用BootStrap實現用戶登錄界面UI，布局風格采用左右各一半的風格設計，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-08-08
這篇文章主要介紹了基于JavaScript實現隨機顏色輸入框的實例代碼，代碼簡單易懂，非常不錯，需要的朋友參考下吧2016-12-12
這篇文章主要總結了JS常用字符串的處理方法,需要的朋友可以參考下2014-05-05