TypeScript - Tham số còn lại: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào, những người đam mê lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của TypeScript, cụ thể là khám phá Tham số còn lại (Rest Parameter). Là giáo viên khoa học máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn qua khái niệm này với những giải thích rõ ràng và nhiều ví dụ. Vậy, hãy mở sổ tay ảo của bạn và cùng chúng ta bước vào!

TypeScript - Rest Parameter

Tham số còn lại là gì?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với một analogies vui vẻ. Hãy tưởng tượng bạn đang tổ chức một buổi tiệc và bạn đã mời một vài người bạn. Nhưng nếu nhiều người hơn đến tham gia? Đó là lúc tham số còn lại phát huy tác dụng trong lập trình - nó giống như việc bạn có một danh sách khách mời mở rộng cho các tham số hàm của bạn!

Trong TypeScript (và JavaScript), tham số còn lại cho phép một hàm chấp nhận một số lượng không xác định các đối số dưới dạng một mảng. Nó được đại diện bởi ba chấm (...) theo sau là tên tham số.

Cú pháp

function functionName(...restParameterName: type[]): returnType {
    // thân hàm
}

Bây giờ, hãy phân tích nó:

... là gì làm cho nó trở thành một tham số còn lại.
restParameterName là tên bạn đặt cho tham số này (bạn có thể chọn bất kỳ tên biến hợp lệ nào).
type[] xác định loại của các phần tử trong mảng (ví dụ: number[], string[], v.v.).
returnType là giá trị mà hàm trả về (nếu có).

Ví dụ về Tham số còn lại trong thực tế

Hãy cùng nhìn vào một số ví dụ thực tế để xem tham số còn lại hoạt động như thế nào trong các tình huống thực tế.

Ví dụ 1: Tích của các số

function sumNumbers(...numbers: number[]): number {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumNumbers(1, 2, 3));        // Output: 6
console.log(sumNumbers(10, 20, 30, 40)); // Output: 100

Trong ví dụ này, sumNumbers có thể chấp nhận bất kỳ số lượng đối số nào. Tham số còn lại numbers thu thập tất cả các đối số vào một mảng, mà chúng ta sau đó cộng tổng bằng cách sử dụng phương thức reduce.

Ví dụ 2: Chào đón nhiều người

function greetPeople(...names: string[]): string {
    return `Hello, ${names.join(', ')}!`;
}

console.log(greetPeople('Alice'));               // Output: Hello, Alice!
console.log(greetPeople('Bob', 'Charlie', 'Dave')); // Output: Hello, Bob, Charlie, Dave!

Ở đây, greetPeople có thể chào đón bất kỳ số lượng người nào. Tham số còn lại names thu thập tất cả các tên vào một mảng, mà chúng ta sau đó nối thành một chuỗi duy nhất.

Ví dụ 3: Ghi log với dấu thời gian

function logWithTimestamp(message: string, ...data: any[]): void {
    const timestamp = new Date().toISOString();
    console.log(timestamp, message, ...data);
}

logWithTimestamp('User logged in', 'user123', { status: 'active' });
// Output: 2023-06-10T12:34:56.789Z User logged in user123 { status: 'active' }

Trong ví dụ này, chúng ta có một tham số cố định message theo sau là một tham số còn lại data. Điều này cho phép chúng ta ghi log một tin nhắn với dấu thời gian và bất kỳ dữ liệu bổ sung nào.

Tham số còn lại và Operatoor phân tán: Hai mặt của cùng một đồng xu

Bây giờ, hãy xem điều thú vị! Tham số còn lại có một anh em sinh đôi gọi là operatoor phân tán. Cả hai đều trông giống hệt nhau (cả hai đều sử dụng ...), nhưng chúng được sử dụng trong các ngữ cảnh khác nhau.

Tham số còn lại: Sử dụng trong khai báo hàm để thu thập nhiều đối số vào một mảng.
Operatoor phân tán: Sử dụng để phân tán các phần tử của một mảng hoặc đối tượng thành các phần tử riêng lẻ.

Hãy cùng xem chúng trong hành động:

// Tham số còn lại
function introduce(greeting: string, ...names: string[]): string {
    return `${greeting}, ${names.join(' and ')}!`;
}

// Operatoor phân tán
const friends = ['Alice', 'Bob', 'Charlie'];
console.log(introduce('Hello', ...friends));
// Output: Hello, Alice and Bob and Charlie!

Trong ví dụ này, chúng ta sử dụng tham số còn lại trong hàm introduce để thu thập tên, và sau đó sử dụng operatoor phân tán để truyền数组 friends dưới dạng các đối số riêng lẻ vào hàm.

Các phương thức sử dụng Tham số còn lại

Dưới đây là bảng một số phương thức phổ biến hiệu quả sử dụng khái niệm tham số còn lại:

Phương thức	Mô tả	Ví dụ
`Array.push()`	Thêm một hoặc nhiều phần tử vào cuối của một mảng	`numbers.push(4, 5, 6)`
`Array.unshift()`	Thêm một hoặc nhiều phần tử vào đầu của một mảng	`names.unshift('Alice', 'Bob')`
`console.log()`	Ghi nhiều mục vào console	`console.log('Error:', errorCode, errorMessage)`
`Math.max()`	Trả về giá trị lớn nhất của không hoặc nhiều số	`Math.max(1, 3, 2)`
`Math.min()`	Trả về giá trị nhỏ nhất của không hoặc nhiều số	`Math.min(1, 3, 2)`
`String.concat()`	Nối hai hoặc nhiều chuỗi	`'Hello'.concat(' ', 'world', '!')`

Kết luận

Và đây bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của tham số còn lại trong TypeScript. Từ việc hiểu khái niệm cơ bản đến việc thấy nó trong hành động với nhiều ví dụ khác nhau, bạn bây giờ đã được trang bị để sử dụng tính năng mạnh mẽ này trong mã của riêng bạn.

Nhớ rằng, lập trình giống như nấu ăn - tham số còn lại chỉ là một nguyên liệu trong bộ công cụ của bạn. Càng thực hành và thử nghiệm nhiều, bạn sẽ càng trở nên thoải mái với nó. Vậy, hãy thử các ví dụ này, sửa đổi chúng và xem bạn có thể tạo ra gì!

Chúc các bạn lập trình vui vẻ, và cho đến lần gặp lại, mong rằng các hàm của bạn sẽ linh hoạt và các tham số của bạn sẽ phong phú!

Credits: Image by storyset

Hướng Dẫn Trước:

TypeScript - Contructor Hàm

Hướng Dẫn Tiếp Theo:

TypeScript - Phân rã tham số