Tiếng Việt

Nền tảng TypeScript

Loại cơ bản của TypeScript

Luồng điều khiển TypeScript

Hàm TypeScript

Giao diện TypeScript

Lớp và Đối tượng TypeScript

Loại Cao Cấp TypeScript

Thao tác trên các kiểu TypeScript

Nhiều loại TypeScript

TypeScript Phụ 

# TypeScript - Tham số mặc định

Xin chào các ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của TypeScript và khám phá một tính năng sẽ làm cho cuộc sống của bạn như một lập trình viên trở nên dễ dàng hơn: Tham số mặc định. Cuối bài học này, bạn sẽ sử dụng công cụ mạnh mẽ này như một chuyên gia. Vậy, chúng ta hãy bắt đầu!

## Tham số mặc định là gì?

Hãy tưởng tượng bạn là một đầu bếp (hãy kiên nhẫn với tôi, chúng ta sẽ nhanh chóng đến phần lập trình!). Mỗi ngày, bạn nấu một nồi суп ngon lành. Phần lớn thời gian, bạn thêm muối vào суп. Nhưng đôi khi, một khách hàng có thể yêu cầu không thêm muối. Liệu có tuyệt vời nếu bạn có một công thức tự động bao gồm muối unless được chỉ định khác đi? Đó chính xác là điều mà tham số mặc định làm trong lập trình!

Trong TypeScript, tham số mặc định cho phép bạn đặt một giá trị mặc định cho một tham số hàm. Nếu hàm được gọi mà không cung cấp giá trị cho tham số đó, giá trị mặc định sẽ được sử dụng.

Hãy xem một ví dụ đơn giản:

```typescript
function greet(name: string = "World") {
    console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, World!
greet("Alice"); // Output: Hello, Alice!

Trong ví dụ này, "World" là tham số mặc định cho name. Nếu chúng ta gọi greet() mà không có bất kỳ đối số nào, nó sẽ sử dụng "World" làm mặc định. Nhưng nếu chúng ta cung cấp một tên, như "Alice", nó sẽ sử dụng tên đó thay thế.

TypeScript - Default Parameters

Tại sao sử dụng tham số mặc định?

  1. Độ linh hoạt: Chúng làm cho hàm của bạn linh hoạt hơn, cho phép chúng hoạt động có hoặc không có một số đối số nhất định.
  2. Mã sạch sẽ hơn: Chúng giảm thiểu nhu cầu sử dụng các điều kiện trong hàm để kiểm tra xem có cung cấp tham số hay không.
  3. Tăng khả năng đọc: Tham số mặc định làm rõ những giá trị "bình thường" được mong đợi cho một hàm.

Cách sử dụng tham số mặc định

Hãy cùng khám phá sâu hơn với nhiều ví dụ hơn:

Sử dụng cơ bản

function calculateArea(width: number = 10, height: number = 5) {
    return width * height;
}

console.log(calculateArea()); // Output: 50
console.log(calculateArea(20)); // Output: 100
console.log(calculateArea(7, 3)); // Output: 21

Trong ví dụ này, cả width và height đều có giá trị mặc định. Chúng ta có thể gọi hàm mà không có đối số, một đối số (sẽ được sử dụng cho width), hoặc cả hai đối số.

Sử dụng biểu thức làm giá trị mặc định

Tham số mặc định có thể là biểu thức, không chỉ là các giá trị đơn giản:

function getRandomGreeting(name: string = "friend", time: Date = new Date()) {
    const greetings = ["Hello", "Hi", "Hey", "Howdy"];
    const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
    return `${randomGreeting}, ${name}! It's ${time.toLocaleTimeString()} now.`;
}

console.log(getRandomGreeting()); // Output: ví dụ, "Hey, friend! It's 3:45:30 PM now."
console.log(getRandomGreeting("Alice")); // Output: ví dụ, "Hello, Alice! It's 3:45:35 PM now."

Ở đây, chúng ta sử dụng new Date() làm giá trị mặc định cho time, sẽ cung cấp cho chúng ta ngày và giờ hiện tại khi hàm được gọi.

Tham số mặc định với các loại khác

Tham số mặc định hoạt động với tất cả các loại trong TypeScript:

function createUser(
    name: string = "Anonymous",
    age: number = 0,
    isAdmin: boolean = false,
    hobbies: string[] = []
) {
    return { name, age, isAdmin, hobbies };
}

console.log(createUser()); 
// Output: { name: "Anonymous", age: 0, isAdmin: false, hobbies: [] }

console.log(createUser("Alice", 30, true, ["reading", "coding"]));
// Output: { name: "Alice", age: 30, isAdmin: true, hobbies: ["reading", "coding"] }

Ví dụ này cho thấy cách sử dụng tham số mặc định với các loại khác nhau, bao gồm cả mảng và boolean.

Tham số tùy chọn so với tham số mặc định

Bây giờ, bạn có thể đang nghĩ, "Chờ đã! Tôi đã nghe về tham số tùy chọn. Tham số tùy chọn và tham số mặc định khác nhau như thế nào?" Đó là một câu hỏi tuyệt vời! Hãy cùng phân tích:

Tham số tùy chọn

Tham số tùy chọn được đánh dấu bằng ? và cho phép bạn gọi hàm mà không cung cấp giá trị cho tham số đó.

function greetOptional(name?: string) {
    if (name) {
        console.log(`Hello, ${name}!`);
    } else {
        console.log("Hello, stranger!");
    }
}

greetOptional(); // Output: Hello, stranger!
greetOptional("Bob"); // Output: Hello, Bob!

Tham số mặc định

Tham số mặc định cung cấp một giá trị mặc định sẽ được sử dụng nếu không có đối số được cung cấp.

function greetDefault(name: string = "stranger") {
    console.log(`Hello, ${name}!`);
}

greetDefault(); // Output: Hello, stranger!
greetDefault("Bob"); // Output: Hello, Bob!

Khác biệt chính

Tính năng Tham số tùy chọn Tham số mặc định
Cú pháp Sử dụng ? sau tên tham số Sử dụng = giá trị sau loại tham số
Khi không có đối số được cung cấp Tham số là undefined Tham số sử dụng giá trị mặc định
Cần kiểm tra null Thường cần kiểm tra trong thân hàm Không cần kiểm tra thêm
Rõ ràng về ý định Ít rõ ràng hơn về điều gì sẽ xảy ra nếu bỏ qua tham số Rõ ràng hơn về hành vi mặc định

Nói chung, tham số mặc định thường tiện lợi hơn và dẫn đến mã sạch sẽ hơn, vì chúng loại bỏ nhu cầu kiểm tra null trong thân hàm.

Cách tốt nhất để sử dụng tham số mặc định

  1. Sử dụng giá trị mặc định có ý nghĩa: Chọn giá trị mặc định có ý nghĩa cho hầu hết các trường hợp sử dụng của hàm của bạn.
  2. Tài liệu hóa defaults: Mặc dù defaults có trong mã, vẫn tốt nhất nên đề cập chúng trong tài liệu của hàm.
  3. Cẩn thận với defaults có thể thay đổi: Tránh sử dụng các đối tượng có thể thay đổi làm defaults, vì chúng có thể dẫn đến hành vi không mong muốn.
  4. Nhớ undefined: Nhớ rằng undefined sẽ kích hoạt giá trị mặc định, nhưng null sẽ không.
function exampleBestPractices(
    requiredParam: string,
    optionalParam: string = "default value",
    anotherOptional: number = 42
) {
    // Thân hàm
}

Kết luận

Và thế là bạn đã có nó, các bạn! Bạn vừa nâng cấp kỹ năng TypeScript của mình bằng cách thành thạo tham số mặc định. Nhớ rằng, như bất kỳ công cụ nào trong lập trình, tham số mặc định mạnh mẽ nhất khi được sử dụng hợp lý. Chúng có thể làm cho mã của bạn mạnh mẽ hơn, dễ đọc hơn và linh hoạt hơn.

Trong hành trình lập trình của bạn, bạn sẽ tìm thấy nhiều cơ hội để sử dụng tham số mặc định. Có lẽ bạn sẽ tạo một hàm để tính phí vận chuyển với phương thức vận chuyển mặc định, hoặc một hàm để định dạng ngày với định dạng mặc định. Các khả năng là vô tận!

Tiếp tục thực hành, tiếp tục lập trình, và quan trọng nhất, tiếp tục vui vẻ với TypeScript. Đến gặp lại các bạn lần sau, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
TypeScript - Tham số tùy chọn
Hướng Dẫn Tiếp Theo:
TypeScript - Hàm vô danh