TypeScript - 讀取器和設置器

你好，有抱負的程式設計師們！今天，我們將要深入探索 TypeScript 讀取器的迷人世界。別擔心如果你是程式設計的新手——我會一步步引導你了解這個主題，就像我過去幾年來對無數學生所做的那樣。所以，拿一杯你喜歡的飲料，我們開始吧！

TypeScript - Accessors

讀取器是什麼？

在我們深入 TypeScript 讀取器的具體細節之前，讓我們先了解一下讀取器到底是什麼。想像你有一個寶藏箱（這是我們的對象），你想要控制人們如何與箱子裡的寶藏（對象的屬性）互動。讀取器就像是神奇的鑰匙，讓你可以以受控的方式獲取或設定這些寶藏。

在 TypeScript 中，我們有两种類型的讀取器：

讀取方法（Getters）：這些方法幫助我們獲取屬性的值。
設置方法（Setters）：這些方法讓我們可以設定屬性的值。

現在，讓我們詳細探索這兩種方法。

TypeScript 中的讀取方法

讀取方法是什麼？

讀取方法是一種特殊的類型，它允許你訪問對象的屬性。這就像有個私人助理為你提取信息。

如何定義讀取方法

讓我們看一個簡單的例子：

class Person {
private _name: string;

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

get name(): string {
console.log("正在獲取名稱");
return this._name;
}
}

let person = new Person("Alice");
console.log(person.name); // 輸出：正在獲取名稱\nAlice

在這個例子中：

我們有一個 Person 類，其中有一個私有屬性 _name。
我們使用 get 關鍵字定義了一個名為 name 的讀取方法。
當我們訪問 person.name 時，它會調用我們的讀取方法。

為什麼使用讀取方法？

計算屬性：讀取方法可以返回計算過的值。

class Circle {
private _radius: number;

constructor(radius: number) {
this._radius = radius;
}

get area(): number {
return Math.PI * this._radius ** 2;
}
}

let circle = new Circle(5);
console.log(circle.area); // 輸出：78.53981633974483

懶加載：讀取方法可以通過在需要時加載數據來幫助提高性能。

class DataFetcher {
private _data: string | null = null;

get data(): string {
if (this._data === null) {
console.log("正在抓取數據...");
this._data = "一些昂貴的數據";
}
return this._data;
}
}

let fetcher = new DataFetcher();
console.log(fetcher.data); // 輸出：正在抓取數據...\n一些昂貴的數據
console.log(fetcher.data); // 輸出：一些昂貴的數據（這次不會再抓取）

TypeScript 中的設置方法

設置方法是什麼？

設置方法是讀取器的對應部分。它是一種方法，用來設定屬性的值，通常會有一些額外的邏輯。

如何定義設置方法

這裡有一個基本的例子：

class Temperature {
private _celsius: number = 0;

set celsius(value: number) {
if (value < -273.15) {
throw new Error("溫度低於絕對零度是不可能的");
}
this._celsius = value;
}

get celsius(): number {
return this._celsius;
}
}

let temp = new Temperature();
temp.celsius = 25; // 這會調用設置方法
console.log(temp.celsius); // 輸出：25

// temp.celsius = -300; // 這會抛出錯誤

在這個例子中：

我們有一個 Temperature 類，其中有一個私有 _celsius 屬性。
我們為 celsius 定義了一個設置方法，它在設定值之前會檢查值是否有效。

為什麼使用設置方法？

數據驗證：設置方法可以確保只有有效的值被分配給屬性。
副作用：設置方法可以在屬性被更改時觸發其他動作。

class User {
private _name: string = "";
private _lastUpdated: Date = new Date();

set name(value: string) {
this._name = value;
this._lastUpdated = new Date();
}

get name(): string {
return this._name;
}

get lastUpdated(): Date {
return this._lastUpdated;
}
}

let user = new User();
user.name = "Bob";
console.log(user.name); // 輸出：Bob
console.log(user.lastUpdated); // 輸出：當前日期和時間

讀取器和設置器方法總結

這是我們所討論的讀取器和設置器方法的總結：

讀取器類型	關鍵字	目的	示例
讀取方法	`get`	獲取屬性值	`get name(): string { return this._name; }`
設置方法	`set`	設定屬性值	`set name(value: string) { this._name = value; }`

結論

TypeScript 的讀取器和設置器提供了一種強大的方式來控制對象屬性的訪問和修改。它們讓你可以為你的類添加邏輯、驗證和計算屬性，使得你的代碼更健壯且容易維護。

記住，就像學習任何新技能一樣，精通讀取器和設置器需要練習。如果它們立即就明白了——那太好了！如果不然，別氣餒——持續編程，持續嘗試，不久你將會像專家一樣使用 getters 和 setters！

就像我總是告訴我的學生，編程就像學習一種新語言。起初，它可能會顯得很混亂，但只要你有耐心和練習，你很快就會流利地"說" TypeScript。開心編程，並記得在過程中享受樂趣！

Credits: Image by storyset