TypeScript - 物件:初學者指南

你好,未來的編程超級巨星!今天,我們將踏上一段令人興奮的旅程,探索 TypeScript 物件的世界。別擔心如果你從未編過程序——我將成為你的友好導遊,我們會一步步來。在這個教學結束時,你將能夠自信地像專業人士一樣操作物件!

TypeScript - Objects

物件是什麼?

在我們深入 TypeScript 的細節之前,讓我們先來討論一下在編程中物件是什麼。想像你有一個背包。這個背包可以裝進各種物品,每個物品都有自己的特點。在編程中,物件就像那個背包——它是一個容器,可以存放不同的相關信息。

語法:如何在 TypeScript 中創建物件

讓我們從基礎開始。在 TypeScript 中,我們可以使用所謂的「物件字面量記法」來創建物件。這個術語聽起來很複雜,但其實非常簡單。以下是一個例子:

let myBackpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

在這個例子中,myBackpack 是我們的物件。它有三個屬性:colorcapacityisWaterproof。每個屬性都有一個被分配給它的值。

類型注解:告訴 TypeScript 我們期望的數據類型

TypeScript 的一個很酷的功能在於我們可以告訴它我們期望物件中包含的數據類型。這被稱為「類型注解」。讓我們增強我們的背包例子:

let myBackpack: {
color: string;
capacity: number;
isWaterproof: boolean;
} = {
color: "blue",
capacity: 20,
isWaterproof: true
};

在這裡,我們告訴 TypeScript color 應該始終是字符串類型,capacity 應該始終是數字類型,isWaterproof 應該始終是布尔類型。這有助於及早發現錯誤,使我們的代碼更可靠。

物件字面量記法:更深入的觀察

我們已經看到了物件字面量記法在實際操作中的應用,但讓我們進一步分解它。語法遵循以下模式:

let objectName = {
property1: value1,
property2: value2,
// ... 和其他屬性
};

每個屬性之間用逗號分隔,整個物件被大括號 {} 包圍。這就像將物品打包進我們的背包一樣,每個物品都有一個名稱(屬性)和描述(值)。

TypeScript 類型模板:可重用的物件類型

有時候,我們想要創建多個具有相同結構的物件。這時 TypeScript 的類型模板就派上用場了。我們可以定義一個類型,然後重用它:

type Backpack = {
color: string;
capacity: number;
isWaterproof: boolean;
};

let myBackpack: Backpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

let friendsBackpack: Backpack = {
color: "red",
capacity: 15,
isWaterproof: false
};

這個 Backpack 類型就像一個藍圖,確保任何 Backpack 項目的物件都具有正確的結構。

物件作為函數參數:傳遞我們的背包

物件可以被傳遞給函數,讓我們能夠操作複雜的數據結構。以下是一個例子:

function describeBackpack(backpack: Backpack): string {
return `這個 ${backpack.color} 背包有 ${backpack.capacity} 升的容量,並且是 ${backpack.isWaterproof ? "防水" : "不防水"}。`;
}

console.log(describeBackpack(myBackpack));
// 輸出:這個藍色背包有 20 升的容量,並且是防水。

在這個函數中,我們傳遞我們的 Backpack 物件並使用它的屬性來創建一個描述。

匿名物件:沒有名字的背包

有時候,我們需要在不將它們分配給變量的情況下創建物件。這些被稱為匿名物件:

function printBackpackColor(backpack: { color: string }): void {
console.log(`背包是 ${backpack.color}。`);
}

printBackpackColor({ color: "綠色" });
// 輸出:背包是綠色。

在這裡,我們在函數調用中創建了一個物件。這就像在不真正擁有背包的情況下向某人描述背包一樣。

鸭子類型:如果它看起來像一隻鸭子...

TypeScript 使用一個名為「鸭子類型」的概念。這個想法是:如果它看起來像一隻鸭子並且嘎嘎叫,那麼它很可能就是一隻鸭子。在 TypeScript 的術語中,這意味著物件的形狀比它的明確類型更重要:

interface Bag {
color: string;
carry(): void;
}

let myBackpack = {
color: "紫色",
capacity: 25,
carry: function() { console.log("攜帶背包"); }
};

function useBag(bag: Bag) {
console.log(`使用一個 ${bag.color} 的袋子`);
bag.carry();
}

useBag(myBackpack); // 這可以工作!

即使 myBackpack 沒有被明確聲明為 Bag,但它具有 Bag 應該有的所有屬性和方法,因此 TypeScript 允許這樣做。

總結我們的背包冒險

恭喜你!你剛剛用知識裝滿了你的第一個 TypeScript 物件背包。記住,物件在編程中非常強大——它們讓我們能夠將相關的數據和功能組合在一起,就像真實的背包將你所有的徒步旅行裝備保存在一個地方一樣。

在你繼續編程旅程時,你會發現物件無處不在。它們是複雜應用的建築塊,從簡單的待辦事項列表到先進的網絡應用程序。繼續練習,很快你就能夠輕鬆地創建和操作物件!

這裡是我們已經介紹過的方法的快速參考表:

方法 描述
物件字面量記法 使用 {} 語法創建物件
類型注解 指定物件的結構
類型模板 創建可重用的物件類型
物件作為函數參數 將物件傳遞給函數
匿名物件 創建未分配給變量的物件
鸭子類型 基於物件形狀的類型檢查

快樂編程,願你的 TypeScript 物件永遠無 bug,並且充滿令人興奮的屬性!

Credits: Image by storyset