Phân Biệt Biến Module và Biến Cục Bộ trong TypeScript: Hướng Dẫn Chi Tiết

TypeScript cung cấp nhiều cách để khai báo và sử dụng biến, và việc hiểu rõ sự khác biệt giữa **biến module** và **biến cục bộ** là rất quan trọng để viết code có cấu trúc và dễ bảo trì. Bài viết này sẽ đi sâu vào các khái niệm này, cung cấp ví dụ minh họa và hướng dẫn cách sử dụng chúng một cách hiệu quả nhất.

Biến Module trong TypeScript

**Biến module** là các biến được khai báo bên trong một module (hoặc namespace) nhưng bên ngoài bất kỳ hàm hoặc class nào. Chúng có phạm vi hoạt động trong toàn bộ module và có thể được truy cập từ bất kỳ đâu bên trong module đó. Tuy nhiên, theo mặc định, chúng không thể truy cập được từ bên ngoài module trừ khi được export.

Khai báo và Sử Dụng Biến Module

Để khai báo một **biến module**, bạn chỉ cần khai báo nó bên trong module như sau:

    
      module MyModule {
        let moduleVariable: string = "Giá trị của biến module";

        export function myFunction() {
          console.log(moduleVariable); // Truy cập biến module
        }
      }

      MyModule.myFunction(); // Gọi hàm để in giá trị
    
  

Trong ví dụ trên, `moduleVariable` là một **biến module** thuộc `MyModule`. Hàm `myFunction` có thể truy cập trực tiếp biến này. Tuy nhiên, nếu bạn muốn truy cập `moduleVariable` từ bên ngoài `MyModule`, bạn cần phải export nó.

Export Biến Module

Để export một **biến module**, bạn sử dụng từ khóa `export`:

    
      module MyModule {
        export let moduleVariable: string = "Giá trị của biến module";

        export function myFunction() {
          console.log(moduleVariable);
        }
      }

      console.log(MyModule.moduleVariable); // Truy cập biến từ bên ngoài
      MyModule.myFunction();
    
  

Bây giờ, `moduleVariable` có thể được truy cập từ bên ngoài `MyModule` bằng cách sử dụng cú pháp `MyModule.moduleVariable`.

Biến Cục Bộ trong TypeScript

**Biến cục bộ** là các biến được khai báo bên trong một hàm, block (ví dụ: bên trong một vòng lặp `for` hoặc một câu lệnh `if`) hoặc constructor của một class. Chúng chỉ có phạm vi hoạt động trong phạm vi mà chúng được khai báo và không thể truy cập được từ bên ngoài.

Khai báo và Sử Dụng Biến Cục Bộ

Để khai báo một **biến cục bộ**, bạn khai báo nó bên trong hàm hoặc block:

    
      function myFunction() {
        let localVariable: number = 10;
        console.log(localVariable); // Truy cập biến cục bộ
      }

      myFunction();

      // console.log(localVariable); // Lỗi: localVariable không được định nghĩa ở đây
    
  

Trong ví dụ trên, `localVariable` chỉ có thể được truy cập bên trong hàm `myFunction`. Cố gắng truy cập nó từ bên ngoài sẽ gây ra lỗi.

Phân Biệt Rõ Hơn: Biến Module vs. Biến Cục Bộ

Để hiểu rõ hơn về sự khác biệt, hãy xem xét các điểm sau:

• Phạm vi: **Biến module** có phạm vi module, trong khi **biến cục bộ** có phạm vi hàm hoặc block.
• Thời gian tồn tại: **Biến module** tồn tại trong suốt thời gian chạy của module, trong khi **biến cục bộ** chỉ tồn tại khi hàm hoặc block mà chúng được khai báo đang thực thi.
• Khả năng truy cập: **Biến module** có thể được truy cập từ bất kỳ đâu bên trong module (và từ bên ngoài nếu được export), trong khi **biến cục bộ** chỉ có thể được truy cập bên trong phạm vi khai báo.

Ví dụ Thực Tế

Hãy xem xét một ví dụ thực tế hơn. Giả sử bạn đang xây dựng một ứng dụng quản lý người dùng. Bạn có thể sử dụng **biến module** để lưu trữ các cấu hình chung của ứng dụng và **biến cục bộ** để lưu trữ dữ liệu tạm thời trong các hàm xử lý người dùng.

    
      module UserManagement {
        export const API_ENDPOINT: string = "https://api.example.com/users"; // Biến module

        export function getUser(id: number) {
          let user: any = null; // Biến cục bộ

          // Gọi API để lấy thông tin người dùng
          fetch(`${API_ENDPOINT}/${id}`)
            .then(response => response.json())
            .then(data => {
              user = data; // Lưu dữ liệu vào biến cục bộ
              console.log(user);
            });
        }
      }

      UserManagement.getUser(123);
    
  

Trong ví dụ này, `API_ENDPOINT` là một **biến module** chứa địa chỉ API. `user` là một **biến cục bộ** được sử dụng để lưu trữ thông tin người dùng sau khi lấy từ API.

Kết Luận

Việc hiểu rõ sự khác biệt giữa **biến module** và **biến cục bộ** là rất quan trọng để viết code TypeScript có cấu trúc, dễ đọc và dễ bảo trì. Bằng cách sử dụng đúng loại biến cho từng mục đích, bạn có thể tạo ra các ứng dụng mạnh mẽ và linh hoạt hơn. Hy vọng bài viết này đã cung cấp cho bạn một cái nhìn tổng quan và hữu ích về chủ đề này.