# TypeScript - Optional Parameters: A Beginner's Guide

Xin chào bạn, ngôi sao lập trình tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của TypeScript. Hôm nay, chúng ta sẽ khám phá một tính năng nhỏ nhưng rất hữu ích叫做 "Optional Parameters." Đừng lo lắng nếu bạn mới bắt đầu lập trình - tôi sẽ giải thích từng bước, và chúng ta sẽ có một chút vui vẻ trên đường đi!

## What Are Optional Parameters?

Trước khi chúng ta bắt đầu, hãy tưởng tượng bạn đang lên kế hoạch cho một buổi tiệc. Bạn biết bạn cần đĩa và cốc, nhưng bạn không chắc chắn bạn có cần khăn giấy hay không. Điều này giống như optional parameters trong TypeScript - chúng là những vật dụng "có thể" trong danh sách mua sắm của hàm của bạn!

Trong TypeScript, optional parameters cho phép chúng ta tạo ra các hàm mà một số đối số không bắt buộc. Điều này làm cho hàm của chúng ta linh hoạt hơn, giống như việc có khăn giấy optional tại buổi tiệc của bạn sẽ mang lại nhiều lựa chọn hơn.

## Syntax

Bây giờ, hãy nhìn cách chúng ta viết optional parameters trong TypeScript. Nó đơn giản như việc thêm một dấu hỏi (?) sau tên tham số. Đây là cú pháp cơ bản:

```typescript
function functionName(requiredParam: type, optionalParam?: type) {
    // Thân hàm
}

Xem dấu ? nhỏ sau optionalParam đó? Đó là cây phép thuật của chúng ta để biến một tham số bình thường thành một tham số optional!

Examples

Hãy cùng xem một số ví dụ để thấy optional parameters trong hành động. Chúng ta sẽ bắt đầu đơn giản và dần dần tăng độ phức tạp.

Example 1: A Simple Greeting

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

console.log(greet("Alice"));           // Output: Hello, Alice!
console.log(greet("Bob", "Good day")); // Output: Good day, Bob!

Trong ví dụ này, name là tham số bắt buộc, nhưng greeting là optional. Nếu chúng ta không cung cấp một lời chào, hàm sẽ sử dụng "Hello" làm mặc định. Điều này giống như việc có một biển chào mừng mặc định tại buổi tiệc của bạn, nhưng cho phép khách mang theo biển chào mừng tùy chỉnh nếu họ muốn!

Example 2: Calculator with Optional Operation

Hãy tạo một hàm máy tính đơn giản:

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; // Mặc định là nhân
    }
}

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

Ở đây, operation là tham số optional. Nếu nó không được cung cấp, hàm sẽ mặc định nhân. Điều này giống như việc có một cây đa năng - bạn có thể sử dụng các công cụ khác nhau tùy thuộc vào điều bạn cần!

Example 3: User Profile with Optional Fields

Hãy tạo một ví dụ phức tạp hơn liên quan đến hồ sơ người dùng:

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);
// Output: { name: "Alice", age: 30 }

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

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

Trong ví dụ này, chúng ta đang tạo hồ sơ người dùng. name và age là bắt buộc, nhưng email và phoneNumber là optional. Điều này giống như việc điền vào một biểu mẫu mà một số trường được đánh dấu bằng dấu sao (bắt buộc) và một số không!

Best Practices and Tips

1. Order matters: Always put optional parameters after required parameters. It's like putting the "maybe" items at the end of your shopping list.

2. Default values: You can combine optional parameters with default values:

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

3. Don't overdo it: While optional parameters are useful, too many can make your function confusing. Use them wisely!

4. Documentation: Always document what happens when optional parameters are omitted. It's like leaving clear instructions for your party guests.

Conclusion

Congratulations! You've just leveled up your TypeScript skills by mastering optional parameters. Remember, they're like the "bring if you want" items for your function party – they add flexibility and make your code more adaptable.

As you continue your coding journey, you'll find many situations where optional parameters come in handy. They're a powerful tool in your TypeScript toolbox, allowing you to write more flexible and reusable code.

Keep practicing, stay curious, and happy coding! ??

Method	Description
greet(name: string, greeting?: string)	A function that greets a person, with an optional custom greeting.
calculate(a: number, b: number, operation?: string)	A calculator function with an optional operation parameter.
createUserProfile(name: string, age: number, email?: string, phoneNumber?: string)	A function to create a user profile with optional email and phone number.

Credits: Image by storyset