TypeScript - 只读屬性：初學者指南

你好啊，未來的編程超新星！今天，我們將要深入 TypeScript 的精彩世界，並探索其強大的特點之一：只讀屬性。別擔心你對編程還是新手；我將成為你這次刺激旅程中的友好指南。所以，拿起你喜歡的飲料，舒適地坐好，讓我們一起開始這場 TypeScript 的冒險吧！

TypeScript - Readonly Properties

只讀屬性是什麼？

在我們深入細節之前，讓我們先了解什麼是只讀屬性。想像你有一件珍貴的家傳遺物——也許是一個美麗的古代懷錶。你可以觀察它，欣賞它，但不能改變它。這正是 TypeScript 中只讀屬性的作用——你可以查看和使用這些值，但一旦設定後就不能修改。

語法

讓我們從基礎開始。我們如何聲明一個只讀屬性？這就像在屬性名前加上 readonly 關鍵字一樣簡單。以下是一個基本示例：

class Heirloom {
readonly name: string;

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

const familyWatch = new Heirloom("祖父的懷錶");
console.log(familyWatch.name); // 輸出：祖父的懷錶
// familyWatch.name = "新懷錶"; // 錯誤！不能修改只讀屬性

在這個示例中，一旦我們在構造函數中設定 name，我們就不能稍後更改它。這就像將我們家族遺物的名字封存在時間中一樣！

在接口中使用只讀屬性

TypeScript 中的接口就像對象的藍圖。我們也可以在接口中使用只讀屬性。讓我們看看如何操作：

interface ReadonlyPerson {
readonly name: string;
readonly age: number;
}

const person: ReadonlyPerson = {
name: "Alice",
age: 30
};

console.log(person.name); // 輸出：Alice
// person.age = 31; // 錯誤！不能修改只讀屬性

在這裡，我們創建了一個 ReadonlyPerson 接口，其中 name 和 age 都是只讀的。一旦我們根據這個接口創建一個對象，我們就不能更改這些屬性。這就像創造一張身份證——一旦打印出來，你就不能擦除年齡並寫上一個新的！

在類中使用只讀屬性

類是創建具有數據和行為的對象的藍圖。讓我們看看只讀屬性在類中是如何工作的：

class Book {
readonly title: string;
readonly author: string;
private _pageCount: number;

constructor(title: string, author: string, pageCount: number) {
this.title = title;
this.author = author;
this._pageCount = pageCount;
}

get pageCount(): number {
return this._pageCount;
}

addPages(pages: number) {
this._pageCount += pages;
}
}

const myBook = new Book("TypeScript 101", "Jane Doe", 200);
console.log(myBook.title); // 輸出：TypeScript 101
myBook.addPages(50);
console.log(myBook.pageCount); // 輸出：250
// myBook.title = "JavaScript 101"; // 錯誤！不能修改只讀屬性

在這個示例中，title 和 author 是只讀的，但我們仍然可以通過方法修改 pageCount。這就像一本科書——一旦印刷出來，你就不能更改書名或作者，但你可以添加頁數（也許在修訂版中）。

在類型別名中使用只讀屬性

類型別名是類型的綽號。我們也可以與它們一起使用只讀屬性：

type ReadonlyPoint = {
readonly x: number;
readonly y: number;
};

const point: ReadonlyPoint = { x: 10, y: 20 };
console.log(point.x, point.y); // 輸出：10 20
// point.x = 30; // 錯誤！不能修改只讀屬性

在這裡，我們創建了一個 ReadonlyPoint 類型，其中 x 和 y 都是只讀的。這就像在地图上設定坐標——一旦放置，你就不能移動這個點！

Const 與只讀屬性的區別

現在，你可能會想，“const 和 readonly 有什麼區別？”這個問題問得好！讓我們來分析一下：

const PI = 3.14159;
// PI = 3.14; // 錯誤！不能重新賦值給 const 變量

class Circle {
readonly radius: number;

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

const circle = new Circle(5);
// circle.radius = 10; // 錯誤！不能修改只讀屬性

const 用於不能被重新賦值的變量。readonly 用於初始化後不能被更改的屬性。將 const 想像成不會改變容器的承諾，而 readonly 是不會改變內容的承諾。

什麼時候使用只讀屬性？

那麼，我們應該何時使用只讀屬性呢？以下是一些常見情況：

當你有初始化後不應該改變的值時。
當配置對象應該保持不變時。
當防止在大型代碼庫中意外修改時。
當使用不可變數據結構時。

以下是我們討論過的方法總結：

方法	描述	示例
在接口中	在對象藍圖中定義只讀屬性	`interface ReadonlyPerson { readonly name: string; }`
在類中	創建初始化後不能被修改的類屬性	`class Book { readonly title: string; }`
在類型別名中	在自定義類型中定義只讀屬性	`type ReadonlyPoint = { readonly x: number; readonly y: number; }`
Const 與 Readonly	使用 const 對變量，readonly 對屬性	`const PI = 3.14; class Circle { readonly radius: number; }`

記住，使用只讀屬性就像為你將來的自己和其他開發者設定規則。它幫助防止錯誤，並使你的代碼更可預測和可維護。

那就是全部了，我親愛的學生們！我們一起穿越了 TypeScript 中只讀屬性的領地。我希望這個指南為你照亮了道路。記住，熟練來自練習，所以不要害怕在自己的專案中嘗試這些概念。快樂編程，願你的只讀屬性永遠保持其價值不變！

Credits: Image by storyset