TypeScript - 文字型別：初學者指南

你好，未來的編程超級巨星！今天，我們將進入 TypeScript 文字型別的精彩世界。如果你是編程新手，別擔心——我將成為你這次冒險的友好指導。在這個教學結束時，你將能夠像專業人士一樣運用文字型別！

文字型別是什麼？

在我們深入之前，讓我們假設你在訂購披薩。你不能只是說，“我想要一個披薩。”你需要指定大小：小、中或大。在 TypeScript 中，文字型別就像是那些特定的披薩大小——它們是變量可以具有的確切值。

語法

文字型別的語法非常直接。你只需要使用你想要允許的確切值。讓我們看一個基本示例：

let pizzaSize: "small" | "medium" | "large";

在這個例子中，pizzaSize 只能是 "small"、"medium" 或 "large"。其他的不允許——即使是 "加大" 或 "迷你"！

字符串文字型別

字符串文字型別是最常見且最容易理解的。正如它們的名字所暗示的那樣——特定的字符串，變量可以是。

示例 1：一周的日子

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // 沒問題
today = "Someday"; // 錯誤！類型 '"Someday"' 不能分配給類型 'DayOfWeek'。

在這個例子中，DayOfWeek 是一個只能是一周的七天的類型。嘗試分配任何其他字符串，TypeScript 將會指責你！

示例 2：交通信號燈顏色

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`燈光已變為 ${color}`);
}

changeLight("Green"); // 沒問題
changeLight("Purple"); // 錯誤！類型 '"Purple"' 不能分配給參數類型 'TrafficLightColor'。

在這裡，我們確保我們的交通信號燈只能變為有效的顏色。這條街上不允許有迪斯科燈！

數字文字型別

與字符串一樣，我們可以使用數字創建文字型別。這在你想限制值為特定數字時非常有用。

示例 3：骰子投擲

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`你擲得了 ${myRoll}`);

在這個例子中，我們確保我們的骰子只能投擲 1 到 6 的數字。我們的遊戲中不允許有灌水的骰子！

示例 4：衣服尺寸

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // 錯誤！類型 '41' 不能分配給類型 'ShirtSize'。

在這裡，我們限制衣服尺寸為特定的數字。這家店不允許有介於其間的尺寸！

結合文字型別

當我們結合不同的文字型別時，文字型別的真正力量才會顯現出來。

示例 5：遊戲角色狀態

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // 這也是有效的
hero = "Wounded"; // 錯誤！類型 '"Wounded"' 不能分配給類型 'CharacterStatus'。

在這個遊戲中，角色可以是 "Alive"、"Dead"、1（代表存活）或 0（代表死亡）。這就像是既有文字表示也有代碼表示！

文字型別的使用場景

文字型別在許多場景中都非常有用。讓我們探討一些：

1. 函數參數

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// 發送請求
console.log(`發送 ${method} 請求到 ${url}`);
}

sendRequest("https://api.example.com", "GET"); // 沒問題
sendRequest("https://api.example.com", "FETCH"); // 錯誤！類型 '"FETCH"' 不能分配給參數類型 'HttpMethod'。

通過在 HTTP 方法中使用文字型別，我們確保只能使用有效的方法。

2. 配置對象

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

文字型別幫助我們創建有嚴格配置對象，防止打字錯誤和無效設置。

3. 狀態機

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// 执行登錄邏輯
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

在這裡，我們使用文字型別來表示登錄過程中的不同狀態，確保狀態只能是最初定義的值。

方法表

以下是我們所涵蓋的關鍵方法和概念的總結：

方法/概念	描述	示例
型別聲明	使用文字值定義新的型別	type DayOfWeek = "Monday" \| "Tuesday" \| ...
變量分配	將文字型別分配給變量	let today: DayOfWeek = "Monday";
函數參數	在函數參數中使用文字型別	function sendRequest(method: HttpMethod) {...}
結合文字	混合不同的文字型別	type Status = "Active" \| "Inactive" \| 0 \| 1;
接口屬性	在接口屬性中使用文字型別	interface Config { theme: "light" \| "dark" }

這就是了，我的編程學徒！你剛剛在 TypeScript 的旅程中升級了，通過掌握文字型別。記住，就像選擇完美的披薩配料一樣，文字型別能夠幫助你更精確並避免錯誤。繼續練習，很快你將能夠創建有如精心製作的披薩般美味的類型安全代碼！??

Credits: Image by storyset