😲Lấy ví dụ sử dụng globalThis (ok)

Dưới đây là một số ví dụ về cách sử dụng globalThis trong TypeScript và JavaScript để đảm bảo tính tương thích giữa trình duyệt và Node.js.

1. Tạo biến toàn cục không phụ thuộc vào môi trường

Thay vì sử dụng window (chỉ có trong trình duyệt) hoặc global (chỉ có trong Node.js), bạn có thể sử dụng globalThis để đảm bảo biến toàn cục hoạt động ở mọi nơi.

Nhưng cũng dòng code đó chạy trong môi trường nodejs thì nó báo lỗi ngay

Do đó type cách thống nhất dùng globalThis

Kiểm tra nó hoạt động tốt trên cả hay môi trường 😒

Lợi ích: Không cần kiểm tra typeof window !== 'undefined' hoặc typeof global !== 'undefined'.

2. Sử dụng globalThis để truy xuất các API toàn cục

Bạn có thể truy cập các API có sẵn như setTimeout, fetch, console thông qua globalThis:

Lợi ích: Không cần lo lắng về việc setTimeout có tồn tại hay không trên từng môi trường.

3. Kiểm tra môi trường runtime bằng globalThis

Bạn có thể sử dụng globalThis để xác định code đang chạy trong trình duyệt hay Node.js:

4. Tạo một singleton lưu trữ dữ liệu toàn cục

Ví dụ sau sử dụng globalThis để đảm bảo chỉ có một instance của một đối tượng toàn cục, hữu ích trong các ứng dụng lớn:

(globalThis as any).appConfig = {
  apiUrl: "https://api.example.com",
  version: "1.0.0",
};
console.log((globalThis as any).appConfig);

Lợi ích: Giữ cấu hình chung mà không cần truyền nhiều lần giữa các module.

Kết luận

globalThis giúp bạn viết code linh hoạt hơn khi làm việc với cả trình duyệt và Node.js mà không cần lo về sự khác biệt giữa window, global, hay self.