Articles
Giới thiệu về TypeScript
Chức năng trong TypeScript

Chức năng trong TypeScript

Bài viết này giải thích về chức năng trong TypeScript.

YouTube Video

Chức năng trong TypeScript

Chức năng trong TypeScript là các chức năng JavaScript được thêm chú thích kiểu. Trong TypeScript, bạn có thể viết mã chắc chắn hơn bằng cách định nghĩa rõ ràng kiểu dữ liệu đầu vào (tham số) và đầu ra (giá trị trả về) cho chức năng. Dưới đây, chúng tôi giới thiệu các phương pháp cơ bản để định nghĩa chức năng và một số đặc điểm của chức năng trong TypeScript.

Định nghĩa chức năng cơ bản 

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15
  • Hàm add nhận hai tham số kiểu number và trả về một giá trị kiểu number.
  • Nó nhận hai tham số, x và y, cả hai đều có kiểu number, với kiểu dữ liệu được chỉ định rõ ràng.
  • Kiểu trả về cũng được chỉ định là : number.

Chức năng ẩn danh (Biểu thức chức năng)

Chức năng ẩn danh và biểu thức chức năng cũng có thể được sử dụng trong TypeScript. Kiểu dữ liệu có thể được chú thích theo cách tương tự.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12
  • Bạn có thể gán một hàm ẩn danh cho một biến và gọi nó sau đó.
1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120
  • Bạn có thể sử dụng biểu thức hàm có tên để cho phép gọi đệ quy.

Chức năng mũi tên

Chú thích kiểu có thể được sử dụng với chức năng mũi tên.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Đoạn mã này định nghĩa một hàm mũi tên subtract với chú thích kiểu, nhận hai số làm đối số và trả về hiệu của chúng.

Tham số tùy chọn và mặc định

Tham số có thể được làm tùy chọn hoặc gán giá trị mặc định.

Tham số tùy chọn

Thêm ? sau tên tham số sẽ làm cho nó trở thành tùy chọn.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Đoạn mã này cho phép truyền một tham số tùy chọn; nếu tham số được cung cấp, nó sẽ chào bằng tên, nếu không sẽ trả về lời chào chung.

Tham số mặc định

Bạn cũng có thể đặt giá trị mặc định cho các tham số.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Hàm này sử dụng "Guest" làm giá trị mặc định nếu không có đối số nào được truyền vào, và sẽ chào bằng tên đã chỉ định hoặc tên mặc định.

Định nghĩa kiểu chức năng

Cũng có thể xác định kiểu của chính chức năng. Ví dụ, điều này được sử dụng khi truyền một chức năng như một tham số.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Đoạn mã này định nghĩa một kiểu hàm Operation nhận hai số và trả về một số, sau đó sử dụng kiểu này để tạo và chạy các hàm cộng và nhân.

Khi không có giá trị trả về (kiểu void)

Đối với các hàm không có giá trị trả về, hãy chỉ định kiểu void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Đoạn mã này định nghĩa một hàm void tên là logMessage, nhận một thông điệp kiểu chuỗi và in ra bảng điều khiển mà không trả về giá trị nào.

Hàm gọi lại (Callback Function)

Truyền một hàm như một đối số cho hàm khác và thực thi nó sau đó được gọi là hàm gọi lại (callback function). Nó thường được sử dụng trong xử lý bất đồng bộ và xử lý sự kiện.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

Trong ví dụ này, một hàm xuất giá trị ra bảng điều khiển được truyền như một hàm gọi lại.

Ngoài ra, bạn có thể định nghĩa kiểu hàm gọi lại bằng cách sử dụng type hoặc interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Định nghĩa kiểu hàm gọi lại bằng type hoặc interface giúp tăng khả năng tái sử dụng.

Nạp chồng hàm (Function Overloading)

Nạp chồng hàm cho phép bạn định nghĩa các hàm có cùng tên nhưng danh sách tham số khác nhau. Trong TypeScript, bạn có thể định nghĩa nhiều hàm với cùng tên và thực hiện các thao tác khác nhau dựa trên kiểu và số lượng tham số.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

Trong TypeScript, việc nạp chồng được thực hiện như sau:.

  • Chữ ký nạp chồng (Overload Signature)

    • Xác định cách sử dụng hàm (chữ ký của nó). Bằng cách viết điều này nhiều lần, việc nạp chồng trở nên khả thi.

  • Chữ ký triển khai (Implementation Signature)

    • Triển khai thân hàm thực tế. Phần này chỉ được định nghĩa một lần và xử lý tất cả các trường hợp được khai báo trong các chữ ký nạp chồng.

Quy tắc cho việc nạp chồng

Các quy tắc sau đây áp dụng cho việc nạp chồng hàm:.

  • Thứ tự các định nghĩa chữ ký nạp chồng (Order of Overload Signature Definitions)

    • Vì việc đánh giá diễn ra từ trên xuống dưới, nên khuyến nghị định nghĩa các kiểu cụ thể trước, sau đó là các kiểu tổng quát hơn.

  • Tính tương thích của chữ ký triển khai (Compatibility of the Implementation Signature)

    • Chữ ký triển khai phải tương thích với các tham số và giá trị trả về của tất cả các chữ ký quá tải.

  • Xác định chi tiết trong các chữ ký quá tải

    • Chữ ký triển khai có xu hướng không rõ ràng, vì vậy cần xác định chi tiết trong các chữ ký quá tải.
    • Nếu chỉ định nghĩa chữ ký triển khai, suy luận kiểu cho hàm sẽ không đầy đủ.

Tóm tắt

Các hàm trong TypeScript có các đặc điểm sau.

  • Chú thích kiểu dữ liệu
    • Bằng cách chỉ định kiểu dữ liệu cho tham số và giá trị trả về, bạn có thể viết mã an toàn hơn.
  • Hàm ẩn danh và hàm mũi tên
    • Chúng có thể được sử dụng giống như trong JavaScript, và việc thêm chú thích kiểu giúp cải thiện độ an toàn kiểu dữ liệu.
  • Tham số tuỳ chọn và tham số mặc định
    • Bạn có thể làm cho việc chỉ định tham số linh hoạt hơn khi cần.
  • Định nghĩa kiểu của hàm
    • Định nghĩa kiểu của chính hàm để thực hiện kiểm tra kiểu dữ liệu.
  • Nạp chồng hàm
    • Bạn có thể hỗ trợ các tham số khác nhau với cùng một tên hàm.

Bằng cách sử dụng những điều này, bạn có thể viết mã rõ ràng và mạnh mẽ hơn trong TypeScript.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các hàm tích hợp sẵn trong TypeScriptClosure trong TypeScript