TypeScript - 可選參數：初學者指南

你好，未來的編程超級巨星！我很興奮能成為你進入 TypeScript 世界的導遊。今天，我們將探索一個非常實用的特性，名為「可選參數」。別擔心你對編程還是新手——我會一步步為你解析，我們還會在過程中玩得開心！

TypeScript - Optional Parameters

什麼是可選參數？

在我們深入之前，讓我們想像你正在計劃一個派對。你知道你需要盤子和杯子，但你不太確定是否需要餐巾紙。TypeScript 中的可選參數就有點像這樣——它們就像是你的函數購物清單上的「或許」項目！

在 TypeScript 中，可選參數允許我們創建一些參數不是必需的函數。這使得我們的函數更具靈活性，就像在你的派對上有可選的餐巾紙一樣，給你更多的選擇。

語法

現在，讓我們看看如何在 TypeScript 中編寫可選參數。這就像在參數名後加上一個問號（?）。這裡是基本的語法：

function functionName(requiredParam: type, optionalParam?: type) {
// 函數體
}

看到 optionalParam 之後的那個小 ?了嗎？那就是我們的魔法棒，將普通參數變成可選參數！

示例

讓我們通過一些示例來看看可選參數是如何工作的。我們會從簡單的例子開始，然後逐漸增加複雜性。

示例 1：一個簡單的問候

function greet(name: string, greeting?: string) {
if (greeting) {
return `${greeting}, ${name}!`;
} else {
return `Hello, ${name}!`;
}
}

console.log(greet("Alice"));           // 輸出：Hello, Alice!
console.log(greet("Bob", "Good day")); // 輸出：Good day, Bob!

在這個例子中，name 是必需參數，但 greeting 是可選的。如果我們不提供問候語，則函數默認使用 "Hello"。這就像在你的派對上有一個默認的迎客牌，但允許客人帶來他們自己的定制牌一樣！

示例 2：帶有可選操作的計算器

讓我們創建一個簡單的計算器函數：

function calculate(a: number, b: number, operation?: string): number {
if (operation === "add") {
return a + b;
} else if (operation === "subtract") {
return a - b;
} else {
return a * b; // 默認為乘法
}
}

console.log(calculate(5, 3));          // 輸出：15 (5 * 3)
console.log(calculate(10, 5, "add"));  // 輸出：15 (10 + 5)
console.log(calculate(10, 4, "subtract")); // 輸出：6 (10 - 4)

在這裡，operation 是我們的可選參數。如果它沒有被提供，則函數默認為乘法。這就像有一把瑞士軍刀——你可以根據需要使用不同的工具！

示例 3：帶有可選字段的使用者個人資料

讓我們創建一個更複雜的例子，涉及使用者個人資料：

interface UserProfile {
name: string;
age: number;
email?: string;
phoneNumber?: string;
}

function createUserProfile(name: string, age: number, email?: string, phoneNumber?: string): UserProfile {
const profile: UserProfile = {
name: name,
age: age
};

if (email) {
profile.email = email;
}

if (phoneNumber) {
profile.phoneNumber = phoneNumber;
}

return profile;
}

const user1 = createUserProfile("Alice", 30);
console.log(user1);
// 輸出：{ name: "Alice", age: 30 }

const user2 = createUserProfile("Bob", 25, "[email protected]");
console.log(user2);
// 輸出：{ name: "Bob", age: 25, email: "[email protected]" }

const user3 = createUserProfile("Charlie", 35, "[email protected]", "123-456-7890");
console.log(user3);
// 輸出：{ name: "Charlie", age: 35, email: "[email protected]", phoneNumber: "123-456-7890" }

在這個例子中，我們正在創建使用者個人資料。name 和 age 是必需的，但 email 和 phoneNumber 是可選的。這就像填寫一個表單，有些字段標有星號（必需），而有些則沒有！

最佳實踐和提示

順序很重要：始終將可選參數放在必需參數之後。這就像把「或許」項目放在你的購物清單的末尾。
默認值：你可以將可選參數與默認值結合使用：

function greet(name: string, greeting: string = "Hello") {
return `${greeting}, ${name}!`;
}

不要過度使用：雖然可選參數很有用，但過多的可選參數會使你的函數變得模糊不清。謹慎使用！
文檔：始終記錄當省略可選參數時會發生什麼。這就像為你的派對客人留下清晰的指示。

結論

恭喜你！你剛剛通過掌握 TypeScript 的可選參數來提升了自己的編程技能。記住，它們就像是你的函數派對上的「如果想要就帶來」的物品——它們增加了靈活性，並使你的代碼更具適應性。

在你繼續編程旅程的過程中，你會發現很多情況下可選參數都很有用。它們是你 TypeScript 工具箱中的一個強大工具，讓你可以編寫更靈活、更可重用的代碼。

繼續練習，保持好奇心，並且開心地編程！??

方法	描述
`greet(name: string, greeting?: string)`	一個問候人的函數，帶有可選的自定義問候語。
`calculate(a: number, b: number, operation?: string)`	一個計算器函數，帶有可選的操作參數。
`createUserProfile(name: string, age: number, email?: string, phoneNumber?: string)`	一個創建使用者個人資料的函數，帶有可選的電子郵件和電話號碼。

Credits: Image by storyset