title: 如何使用 ts-pattern 改善您的程式碼可讀性？
published: true
description: 一些使用 ts-pattern 的案例，可以改善您的程式碼。
tags: #ts,#react,#typescript,#development
cover_image: https://miro.medium.com/v2/resize:fit:700/format:webp/1*b5O3vcRpPzb5YLQEw9ZrTA.png
以 100:42 的比例獲得最佳效果。
published_at: 2024-09-13 15:09 +0000
我第一次遇見 ts-pattern
幾個月前，我正在檢查客戶的程式碼庫，裡面充斥著眾多的 switch 陳述句和分散在多個檔案中的物件字面量，這使得可讀性和可維護性變得一團糟。
在一次與我的隊友 Erick 的配對程式設計會議中，他分享了他的螢幕，並給我展示了一個他正在測試的庫。
那是我第一次使用 ts-pattern 🤩，說實話，這讓我大為震驚！可讀性和可維護性的提升是不可思議的。
這裡是 ts-pattern 文件的連結。
讓我為您展示一些 ts-pattern 可以產生真實影響的使用案例。我最開始的問題是：我可以在任何 TypeScript 專案中使用這個嗎？答案是肯定的 🙌。
使用案例
1. 取代複雜的 Switch 陳述句
傳統的 switch 陳述句：
const status = "success";
let message;
switch (status) {
case "success":
message = "操作成功！";
break;
case "error":
message = "發生錯誤。";
break;
default:
message = "未知狀態。";
}
console.log(message); // 輸出：操作成功！使用 ts-pattern：
import { match } from 'ts-pattern';
const status = "success";
const message = match(status)
.with("success", () => "操作成功！")
.with("error", () => "發生錯誤。")
.otherwise(() => "未知狀態。");
console.log(message); // 輸出：操作成功！比較：
使用 ts-pattern 的可讀性更清晰，無需 break 陳述句，且模式匹配專注於案例。添加或移除條件在 ts-pattern 中更容易，您不必擔心在 switch 案例中忘記 break 的陷阱。
2. 用於 API 回應的物件匹配
使用物件匹配：
const apiResponse = {
status: 200,
data: {
user: {
id: 1,
name: 'John',
},
},
};
let userName;
if (apiResponse.status === 200 && apiResponse.data.user.name === 'John') {
userName = "你好，約翰！";
} else {
userName = "未找到用戶。";
}
console.log(userName); // 輸出：你好，約翰！使用 ts-pattern：
const apiResponse = {
status: 200,
data: {
user: {
id: 1,
name: 'John',
},
},
};
const userName = match(apiResponse)
.with({ status: 200, data: { user: { name: "John" } } }, () => "你好，約翰！")
.otherwise(() => "未找到用戶。");
console.log(userName); // 輸出：你好，約翰！比較：
ts-pattern 減少了對深層嵌套 if 條件的需求，使邏輯更清晰流暢。模式匹配直接反映了物件的結構，使其更易於理解和修改。
3. 狀態管理
使用 switch 的狀態管理：
const appState = { status: "loading" };
let displayMessage;
switch (appState.status) {
case "loading":
displayMessage = "加載中...";
break;
case "success":
displayMessage = "數據加載成功！";
break;
case "error":
displayMessage = "數據加載失敗。";
break;
default:
displayMessage = "未知狀態。";
}
console.log(displayMessage); // 輸出：加載中...使用 ts-pattern：
const appState = { status: "loading" };
const displayMessage = match(appState.status)
.with("loading", () => "加載中...")
.with("success", () => "數據加載成功！")
.with("error", () => "數據加載失敗。")
.otherwise(() => "未知狀態。");
console.log(displayMessage); // 輸出：加載中...比較：
ts-pattern 簡化了狀態管理，消除了重複的 case 和 break 陳述句的需求。隨著狀態數量的增長，ts-pattern 在邏輯錯誤的可能性上具有更好的擴展性。
通過比較 switch 陳述句、物件字面量和傳統條件與 ts-pattern，顯而易見 ts-pattern 提供了一種更優雅和可擴展的方法。無論您是在處理複雜的狀態、物件匹配，或是驗證，ts-pattern 都能減少樣板代碼，改善可讀性，並最小化潛在的錯誤。試試看吧。
原文出處：https://dev.to/tauantcamargo/how-ts-pattern-can-improve-your-code-readability-37dd
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式