# TypeScript - Parameter Destructuring

Xin chào, những ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ cùng nhau khám phá một chủ đề thú vị trong TypeScript: Parameter Destructuring. Đừng lo lắng nếu nó听起来 có vẻ khó khăn ban đầu - tôi hứa rằng chúng ta sẽ chia nhỏ nó thành những phần dễ nuốt. Vậy, hãy lấy饮料 yêu thích của bạn, thư giãn và cùng nhau bắt đầu hành trình học tập này nhé!

## Parameter Destructuring là gì?

Trước khi chúng ta đi sâu vào chi tiết, hãy bắt đầu với một ví dụ đơn giản. Hãy tưởng tượng bạn có một hộp quà tặng được bọc đẹp mắt. Parameter destructuring giống như việc bạn cẩn thận mở hộp quà và ngay lập tức sắp xếp nội dung của nó gọn gàng trên bàn. Trong lập trình, nó là cách để trích xuất các giá trị từ các đối tượng hoặc mảng và gán chúng vào các biến trong một bước duy nhất, ngay trong các tham số hàm.

## Cú pháp

Cú pháp cho parameter destructuring trong TypeScript rất đơn giản. Hãy cùng xem xét từng bước:

### Object Destructuring

```typescript
function greetPerson({ name, age }: { name: string, age: number }) {
    console.log(`Hello, ${name}! You are ${age} years old.`);
}

Trong ví dụ này, chúng ta đang thực hiện destructuring một đối tượng ngay trong các tham số hàm. Phần { name, age } là nơi xảy ra phép màu - nó có nghĩa là "Tôi mong đợi một đối tượng có các thuộc tính name và age, và tôi muốn sử dụng chúng trực tiếp như các biến trong hàm của mình."

Array Destructuring

function getFirstTwo([first, second]: number[]) {
    console.log(`The first number is ${first} and the second is ${second}`);
}

Ở đây, chúng ta đang thực hiện destructuring một mảng. Cú pháp [first, second] cho TypeScript biết rằng hãy lấy hai phần tử đầu tiên của mảng và gán chúng vào các biến first và second.

Ví dụ

Hãy cùng đi sâu hơn với nhiều ví dụ hơn để củng cố hiểu biết của chúng ta.

Ví dụ 1: Object Destructuring đơn giản

function introduceHero({ name, power, age }: { name: string, power: string, age: number }) {
    console.log(`Meet ${name}, aged ${age}, with the power of ${power}!`);
}

// Sử dụng
introduceHero({ name: "Spider-Man", power: "web-slinging", age: 23 });

Trong ví dụ này, chúng ta đang tạo một hàm để giới thiệu một siêu anh hùng. Hàm này mong đợi một đối tượng có các thuộc tính name, power, và age. Bằng cách sử dụng parameter destructuring, chúng ta có thể truy cập trực tiếp các thuộc tính này như các biến trong hàm.

Khi chúng ta gọi hàm, chúng ta truyền một đối tượng phù hợp với cấu trúc này. Kết quả đầu ra sẽ là:

Meet Spider-Man, aged 23, with the power of web-slinging!

Ví dụ 2: Destructuring với giá trị mặc định

function orderCoffee({ type = "Espresso", size = "Medium" }: { type?: string, size?: string } = {}) {
    console.log(`Preparing a ${size} ${type}`);
}

// Sử dụng
orderCoffee({}); // Preparing a Medium Espresso
orderCoffee({ type: "Latte" }); // Preparing a Medium Latte
orderCoffee({ size: "Large", type: "Cappuccino" }); // Preparing a Large Cappuccino

Ví dụ này minh họa cách chúng ta có thể sử dụng giá trị mặc định với parameter destructuring. Nếu một thuộc tính không được cung cấp khi gọi hàm, nó sẽ sử dụng giá trị mặc định. Lưu ý rằng chúng ta có thể gọi hàm với một đối tượng trống hoặc bỏ qua một số thuộc tính, và nó vẫn hoạt động!

Ví dụ 3: Destructuring nested

function printBookInfo({ title, author: { name, birthYear } }: 
    { title: string, author: { name: string, birthYear: number } }) {
    console.log(`"${title}" was written by ${name}, born in ${birthYear}`);
}

// Sử dụng
printBookInfo({
    title: "The Hitchhiker's Guide to the Galaxy",
    author: {
        name: "Douglas Adams",
        birthYear: 1952
    }
});

Ở đây, chúng ta đang làm việc với một cấu trúc đối tượng phức tạp hơn. Chúng ta đang destructuring một đối tượng nested để lấy tên và năm sinh của tác giả. Ví dụ này cho thấy sức mạnh của destructuring khi làm việc với các cấu trúc dữ liệu phức tạp.

Ví dụ 4: Array Destructuring với rest parameters

function analyzeScores([first, second, ...rest]: number[]) {
    console.log(`Top score: ${first}`);
    console.log(`Runner-up: ${second}`);
    console.log(`Other scores: ${rest.join(', ')}`);
}

// Sử dụng
analyzeScores([95, 88, 76, 82, 70]);

Ví dụ này minh họa cách chúng ta có thể kết hợp array destructuring với rest parameters. Chúng ta đang trích xuất hai phần tử đầu tiên của mảng riêng lẻ, và sau đó thu thập tất cả các phần tử còn lại vào một mảng mới gọi là rest.

Bảng tóm tắt phương pháp

Dưới đây là bảng tóm tắt các phương pháp và khái niệm chúng ta đã bao gồm:

Phương pháp/Khái niệm	Mô tả	Ví dụ
Object Destructuring	Trích xuất các thuộc tính từ một đối tượng vào các biến riêng lẻ	{ name, age }: { name: string, age: number }
Array Destructuring	Trích xuất các phần tử từ một mảng vào các biến riêng lẻ	[first, second]: number[]
Default Values	Cung cấp giá trị mặc định nếu một thuộc tính là không xác định	{ type = "Espresso" }: { type?: string }
Nested Destructuring	Destructuring các đối tượng hoặc mảng nested	{ author: { name, birthYear } }
Rest Parameters	Thu thập các phần tử còn lại vào một mảng	[first, second, ...rest]: number[]

Kết luận

Chúc mừng! Bạn vừa mở khóa một tính năng mạnh mẽ của TypeScript: Parameter Destructuring. Kỹ thuật này không chỉ làm cho mã của bạn ngắn gọn và dễ đọc hơn mà còn cho phép bạn làm việc với các cấu trúc dữ liệu phức tạp một cách hiệu quả hơn.

Nhớ rằng, giống như bất kỳ kỹ năng mới nào, việc thành thạo parameter destructuring đòi hỏi phải练习. Đừng nản lòng nếu nó cảm thấy khó khăn ban đầu - ngay cả những nhà phát triển có kinh nghiệm đôi khi cũng cần dừng lại và suy nghĩ qua cú pháp destructuring của họ.

Tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Thế giới của TypeScript rất rộng lớn và thú vị, và bạn đang trên đường trở thành một ninja TypeScript. Hẹn gặp lại lần sau, chúc bạn lập trình vui vẻ!

Credits: Image by storyset