TypeScript 中條件邏輯的最佳實踐
本文介紹了TypeScript 中條件邏輯的最佳實踐。
YouTube Video
TypeScript 中條件邏輯的最佳實踐
使用型別守衛縮小型別範圍
通過利用TypeScript 的型別系統並在 if 語句中使用型別守衛，可以提高型別安全性和可讀性。
1function processInput(input: string | number) {
2 if (typeof input === "string") {
3 console.log(`String input: ${input.toUpperCase()}`);
4 } else {
5 console.log(`Number input: ${input.toFixed(2)}`);
6 }
7}使用 typeof 和其他型別守衛可確保每個區塊內的程式碼是型別安全且具有上下文相關性。
避免嵌套的 if 語句
嵌套過深的 if 語句會降低程式碼的可讀性和可維護性。取而代之的是，請使用提前返回、邏輯運算符或提取函數。
錯誤示例：
1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2 if (user.age) {
3 if (user.age > 18) {
4 if (user.isAdmin) {
5 console.log("User is an adult admin.");
6 }
7 }
8 }
9}改進的示例：
1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2 if (!user.age || user.age <= 18 || !user.isAdmin) {
3 return;
4 }
5 console.log("User is an adult admin.");
6}此方法可將程式碼扁平化，並使邏輯更易於理解。
使用可選鏈接操作符
在檢查嵌套屬性時，使用可選鏈接（?.）以避免不必要的 if 條件。
不使用可選鏈接：
1if (user && user.profile && user.profile.email) {
2 console.log(user.profile.email);
3}使用可選鏈接：
1if (user?.profile?.email) {
2 console.log(user.profile.email);
3}這可以減少樣板程式碼並提高可讀性。這裡所說的樣板程式碼是指為執行特定任務而經常需要的重複的、標準化的程式碼。
使用嚴格相等運算符
TypeScript 支援嚴格型別檢查，使用嚴格相等（===）或嚴格不等（!==）運算符有助於防止意外的型別強制轉換。
錯誤示例：
1if (value == "123") {
2 console.log("Value is 123.");
3}改進的示例：
1if (value === "123") {
2 console.log("Value is 123.");
3}對於明確的條件使用枚舉或文字型別
使用枚舉或文字型別可以使條件更清晰，並降低出錯的可能性。
1type Status = "success" | "error" | "loading";
2
3function displayMessage(status: Status) {
4 if (status === "success") {
5 console.log("Operation succeeded.");
6 } else if (status === "error") {
7 console.log("Operation failed.");
8 } else {
9 console.log("Loading...");
10 }
11}通過定義預期的值，TypeScript 能夠檢測型別並確保準確性。
合併類似條件
當多個條件具有相同邏輯時，可使用邏輯運算符或 switch 聲明將其合併。
錯誤示例：
1if (role === "admin") {
2 grantAccess();
3}
4if (role === "superadmin") {
5 grantAccess();
6}改進的示例：
1if (role === "admin" || role === "superadmin") {
2 grantAccess();
3}或者，使用 switch 聲明來處理多個明確的分支：
1switch (role) {
2 case "admin":
3 case "superadmin":
4 grantAccess();
5 break;
6 case "user":
7 console.log("Limited access.");
8 break;
9 default:
10 console.log("No access.");
11}避免使條件表達式複雜化
if 條件中的複雜條件表達式會降低可讀性。將它們提取為具有意義的變量或函數。
錯誤示例：
1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2 console.log("User can write.");
3}改進的示例：
1const isAdultAdminWithWriteAccess =
2 user.age > 18 && user.isAdmin && user.permissions.includes("write");
3
4if (isAdultAdminWithWriteAccess) {
5 console.log("User can write.");
6}給條件命名可以提升清晰度，使程式碼具有自我說明性。
對於簡單條件，使用三元運算符
對於簡單條件，使用三元運算符可以使程式碼更加簡潔。
範例：
1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);然而，避免對複雜條件使用三元運算符，因為這會降低可讀性。
用數組或映射替換條件分支
當條件僅僅是值映射時，相比於使用 switch 語句或複雜的 if-else 塊，使用數組或映射可以提高代碼的可讀性和可維護性。在 TypeScript 中，您可以利用類型信息以更安全的方式實現。
錯誤示例：
1function getDayName(day: number): string {
2 switch (day) {
3 case 0:
4 return "Sunday";
5 case 1:
6 return "Monday";
7 case 2:
8 return "Tuesday";
9 case 3:
10 return "Wednesday";
11 case 4:
12 return "Thursday";
13 case 5:
14 return "Friday";
15 case 6:
16 return "Saturday";
17 default:
18 return "Invalid day";
19 }
20}改進範例：使用數組
1function getDayName(day: number): string {
2 const days = [
3 "Sunday",
4 "Monday",
5 "Tuesday",
6 "Wednesday",
7 "Thursday",
8 "Friday",
9 "Saturday"
10 ];
11 return days[day] ?? "Invalid day";
12}改進範例：使用映射
1function getDayName(day: number): string {
2 const dayMap = new Map<number, string>([
3 [0, "Sunday"],
4 [1, "Monday"],
5 [2, "Tuesday"],
6 [3, "Wednesday"],
7 [4, "Thursday"],
8 [5, "Friday"],
9 [6, "Saturday"]
10 ]);
11 return dayMap.get(day) ?? "Invalid day";
12}結論
遵循這些最佳實踐，可以使 TypeScript 中的 if 語句更清晰、高效且易於維護。通過使用 TypeScript 的類型守衛、可選鏈式運算符和枚舉等功能，可以提高代碼的可讀性和穩健性。通過遵循最佳實踐，可以使條件簡明清晰，從而產生更易於理解和維護的代碼。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。