TypeScript - 模板字面量类型

你好啊，未來的編程超新星們！今天，我們將踏上一段令人興奮的旅程，探索TypeScript世界的迷人特點——模板字面量類型。別擔心你對編程還是新手——我會一步步引導你，就像我這些年來對無數學生所做的一樣。所以，拿起你喜歡的飲料，放鬆一下，我們來一起深入探究！

TypeScript - Template Literal Types

模板字面量類型是什麼？

在我們深入細節之前，讓我們先了解一下什麼是模板字面量類型。想像你正在創建一張賀卡。你有一個基本的模板，但你想為它加上不同的名字和訊息以個性化它。這就是TypeScript中的模板字面量類型所做的——它們允許我們創建有彈性、可重用的類型定義，這些定義可以根據我們的輸入而變化。

語法

模板字面量類型的語法起初可能看起來有些奇怪，但我保證它並不像看起來那麼複雜。這裡是基本結構：

type TemplateLiteralType = `前綴 ${SomeType} 後綴`;

讓我們來分解這個結構：

type 是TypeScript中的一個關鍵字，我們用它來定義新的類型。
TemplateLiteralType 是我們給我們新類型的名字（你可以隨意選擇）。
反引號 (`) 用來包圍我們的模板。
${SomeType} 是一個佔位符，我們可以在其中插入另一個類型。
前綴 和 後綴 是可選的文本，它們將總是我們類型的一部分。

想像一下這就像Mad Libs遊戲，其中 ${SomeType} 是我們填入以創造不同變體的空白。

範例

現在，讓我們來看一些範例，以實際了解模板字面量類型是如何工作的。我會提供大量的代碼範例，並詳細解釋每一個。

範例 1：基本使用

type問候 = `Hello, ${string}!`;

let myGreeting: Greeting = "Hello, World!";  // 這是有效的
let invalidGreeting: Greeting = "Hi there!"; // 這將導致錯誤

在這個範例中，我們創建了一個 Greeting 類型，它必須始於 "Hello, " 且結束於 "!"。${string} 的部分意味著我們可以在中間放入任何字符串。這就像擁有一個問候卡模板，你可以更改其中的名字。

範例 2：結合字符串字面量

type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type TShirt = `${Size}-${Color}`;

let myShirt: TShirt = "medium-blue";  // 這是有效的
let invalidShirt: TShirt = "tiny-yellow";  // 這將導致錯誤

在這裡，我們通過結合兩個其他類型：Size 和 Color，來創建一個 TShirt 類型。這允許我們創建有效的組合，如 "small-red" 或 "large-green"，但阻止無效的組合，如 "tiny-yellow"。

範例 3：使用數字

type Coordinate = `${number},${number}`;

let point: Coordinate = "10,20";  // 這是有效的
let invalidPoint: Coordinate = "10,20,30";  // 這將導致錯誤

在這個範例中，我們使用 number 而不是 string。這創建了一個表示2D坐標的類型。它必須是兩個數字，並用逗號分隔。

範例 4：複雜模板

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/${string}`;

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

let validRoute: ApiRoute = "GET /users";
let anotherValidRoute: ApiRoute = "POST /update-profile";
let invalidRoute: ApiRoute = "PATCH /items";  // 這將導致錯誤

這個範例展示了如何創建更複雜的類型。我們定義了一個 ApiRoute 類型，它結合了HTTP方法和終點。這確保了我們的API路由始終遵循特定的格式。

範例 5：大寫和小寫修飾符

type Greeting = "hello" | "hi" | "hey";
type ShoutingGreeting = Uppercase<Greeting>;
type WhisperingGreeting = Lowercase<Greeting>;

let loud: ShoutingGreeting = "HELLO";  // 這是有效的
let soft: WhisperingGreeting = "hi";   // 這是有效的
let invalid: ShoutingGreeting = "Hey"; // 這將導致錯誤

TypeScript還提供了像 Uppercase 和 Lowercase 這樣的實用類型，我們可以與我們的模板字面量類型一起使用。這個範例展示了如何創建新類型，這些類型是現有類型的全大寫或全小寫版本。

方法表

這裡是一個總結我們討論過的關鍵方法和實用的表格：

方法/實用	描述	範例
基本模板	創建有固定前綴/後綴和可變部分的類型	`type Greeting = 'Hello, ${string}!'`
聯合類型	結合多個字符串字面量類型	`type Color = "red" \\| "blue" \\| "green"`
大寫	將字符串字面量類型轉換為大寫	`type Upper = Uppercase<"hello">`
小寫	將字符串字面量類型轉換為小寫	`type Lower = Lowercase<"HELLO">`

結論

親愛的學生們，以上就是關於TypeScript中模板字面量類型的精彩世界。從基本使用到更複雜的範例，你已經看到了這個特性如何幫助我們創建更精確和靈活的類型定義。

記住，就像學習任何新技能一樣，精通模板字面量類型需要練習。如果它立即沒有點醒你——我見過無數學生在最開始時都會感到困難，但之後都會有那個 "啊哈！" 的時刻。持續嘗試，試著創造你自己的類型，並最重要的是，享受這個過程！

在我多年的教學中，我發現那些享受學習過程的學生往往是表現最好的。所以，把TypeScript當作你編程工具箱中的一個強大工具，把模板字面量類型當作這個工具箱中的瑞士軍刀——多用途、精確，當你知道如何使用它時，它會非常有用。

現在，帶著你新學到的知識，去創造令人驚奇的事物吧。並記住，在編程的世界裡，唯一的限制是你的想像力（有時候可能是你的編譯器，但那是另一個故事了）。快樂編程！

Credits: Image by storyset