TypeScript - Loại hàm

Xin chào các bạn đang theo đuổi lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới fascininating của các loại hàm TypeScript. Đừng lo lắng nếu bạn mới bắt đầu lập trình; tôi sẽ hướng dẫn bạn từng khái niệm một cách chi tiết, giống như tôi đã làm cho hàng trăm sinh viên trong những năm dạy học của mình. Hãy cùng bắt đầu hành trình thú vị này nhé!

Gán loại cho hàm

Trong TypeScript, hàm là công dân hạng nhất, có nghĩa là chúng ta có thể đối xử với chúng như bất kỳ giá trị nào khác. Nhưng điều làm TypeScript đặc biệt là khả năng gán loại cho các hàm. Hãy tưởng tượng bạn là một đầu bếp (hàm) với một công thức đặc biệt (loại hàm). Công thức này告诉 bạn cần những nguyên liệu gì (tham số) và món ăn bạn sẽ tạo ra (loại trả về).

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

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

Trong ví dụ này, greet là hàm của chúng ta. Nó nhận một name có loại string làm đầu vào và trả về một string. Phần : string sau dấu phẩy tròn chỉ định loại trả về.

Bây giờ, hãy thử sử dụng hàm này:

const greeting = greet("Alice");
console.log(greeting); // Output: Hello, Alice!

TypeScript đảm bảo rằng chúng ta sử dụng hàm đúng cách. Nếu chúng ta cố gắng truyền một số thay vì một chuỗi:

greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

TypeScript sẽ bắt lỗi này trước khi chúng ta chạy mã. Đó như có một trợ lý giúp đỡ trong bếp, đảm bảo bạn không nhầm lẫn đường với muối!

Biểu thức loại hàm TypeScript

Bây giờ, hãy học về biểu thức loại hàm. Đây như một bản thiết kế cho các hàm của chúng ta. Chúng mô tả một hàm nên trông như thế nào mà không thực sự triển khai nó.

Dưới đây là cú pháp chung:

(parameter1: type1, parameter2: type2, ...) => returnType

Ví dụ:

let mathOperation: (x: number, y: number) => number;

Điều này khai báo mathOperation là một biến có thể giữ bất kỳ hàm nào nhận hai số và trả về một số. Đó như nói, "Tôi cần một đầu bếp có thể lấy hai nguyên liệu và tạo ra một món ăn."

Chúng ta sau đó có thể gán một hàm cho biến này:

mathOperation = function(x, y) {
return x + y;
}

console.log(mathOperation(5, 3)); // Output: 8

Khai báo biến loại hàm

Chúng ta cũng có thể sử dụng别名 để cho các loại hàm. Điều này rất hữu ích khi chúng ta muốn sử dụng cùng một loại hàm ở nhiều nơi khác nhau.

type GreetFunction = (name: string) => string;

let greet: GreetFunction;

greet = function(name) {
return `Hello, ${name}!`;
}

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

Trong ví dụ này, GreetFunction là别名 của chúng ta. Đó như cho một công thức tên để dễ dàng tham chiếu sau này.

Chỉ định tham số hàm là hàm

Đôi khi, chúng ta muốn truyền các hàm làm tham số cho các hàm khác. Đây là một khái niệm mạnh mẽ trong lập trình gọi là "hàm cao cấp". Đó như có một đầu bếp chính chỉ đạo các đầu bếp khác.

Hãy xem một ví dụ:

function applyOperation(x: number, y: number, operation: (a: number, b: number) => number): number {
return operation(x, y);
}

let result = applyOperation(5, 3, (a, b) => a + b);
console.log(result); // Output: 8

result = applyOperation(5, 3, (a, b) => a * b);
console.log(result); // Output: 15

Ở đây, applyOperation là hàm cao cấp của chúng ta. Nó nhận hai số và một hàm hoạt động làm tham số. Chúng ta có thể truyền các hàm hoạt động khác nhau để nhận kết quả khác nhau.

Sử dụng别名 cho các loại hàm

Alias có thể làm cho mã của chúng ta dễ đọc hơn khi làm việc với các loại hàm phức tạp. Hãy xem một ví dụ phức tạp hơn:

type MathOperation = (x: number, y: number) => number;
type MathOperationWithDescription = (description: string, operation: MathOperation) => string;

const add: MathOperation = (x, y) => x + y;
const subtract: MathOperation = (x, y) => x - y;

const describeMathOperation: MathOperationWithDescription = (description, operation) => {
return `${description}: ${operation(10, 5)}`;
}

console.log(describeMathOperation("Addition", add)); // Output: Addition: 15
console.log(describeMathOperation("Subtraction", subtract)); // Output: Subtraction: 5

Trong ví dụ này, chúng ta đã tạo ra hai别名: MathOperation và MathOperationWithDescription. Điều này làm cho mã của chúng ta dễ đọc và dễ bảo trì hơn.

Dưới đây là bảng tóm tắt các loại hàm chúng ta đã xem xét:

Loại hàm	Mô tả	Ví dụ
Loại hàm cơ bản	Chỉ định loại tham số và loại trả về	(name: string) => string
Biến loại hàm	Biến có thể giữ một hàm của một loại cụ thể	let greet: (name: string) => string;
Alias loại hàm	Tên cho loại hàm để tái sử dụng	type GreetFunction = (name: string) => string;
Hàm cao cấp	Hàm nhận một hàm làm tham số	(x: number, y: number, operation: (a: number, b: number) => number) => number

Nhớ rằng, các loại hàm TypeScript đều về việc đảm bảo chúng ta sử dụng hàm đúng cách. Chúng như những rào cản trên đường, giúp chúng ta không đi lệch hướng và tránh lỗi. Với sự luyện tập, bạn sẽ thấy rằng chúng làm cho mã của bạn mạnh mẽ và dễ hiểu hơn.

Tiếp tục lập trình, tiếp tục học hỏi, và đừng quên tận hưởng niềm vui trên đường đi!

Credits: Image by storyset