Đối tượng window trong TypeScript

Bài viết này giải thích về đối tượng window trong TypeScript.

Bạn có thể tìm hiểu về các thuộc tính và phương thức của đối tượng window thông qua mã nguồn.

YouTube Video

Đối tượng window trong TypeScript

window là một đối tượng toàn cục trong TypeScript và JavaScript, đại diện cho toàn bộ cửa sổ trình duyệt. Nó bao gồm nhiều thuộc tính và phương thức để truy cập các API trình duyệt, thao tác với DOM (Mô hình Đối tượng Tài liệu), sử dụng bộ đếm giờ, lưu trữ, và các tính năng khác.

tsconfig.json và đối tượng window

Trong TypeScript, khi truy cập đối tượng window, các tính năng toàn cục cụ thể của trình duyệt có định nghĩa kiểu, cho phép hoàn thành tự động và kiểm tra kiểu trong trình chỉnh sửa. Nhờ tệp định nghĩa kiểu chuẩn của TypeScript (lib.dom.d.ts), TypeScript nhận diện nhiều thuộc tính và phương thức của đối tượng window.

Khi sử dụng TypeScript, thường đặt tệp tsconfig.json ở thư mục gốc của dự án. Tệp này được sử dụng để chỉ định các tuỳ chọn trình biên dịch và phạm vi các tệp định nghĩa kiểu dữ liệu.

Khi làm việc với window, điều đặc biệt quan trọng là phải bật định nghĩa kiểu trình duyệt (định nghĩa kiểu DOM). Nếu không có điều này, window và document sẽ gây ra lỗi kiểu dữ liệu.

 1{
 2  "compilerOptions": {
 3    "target": "es6",
 4    "module": "esnext",
 5    "strict": true,
 6    "lib": ["es6", "dom"],   // Enable DOM type definitions
 7    "outDir": "./dist"
 8  },
 9  "include": ["src"]
10}

• Bằng cách chỉ định "lib": ["es6", "dom"], các kiểu của window và document sẽ được nhận diện chính xác và hỗ trợ tự động hoàn thành.

Các thuộc tính và phương thức chính của window

1. window.document window.document là một thuộc tính dùng để truy cập DOM của trang. Bạn có thể lấy các phần tử và thực hiện thay đổi DOM.

1console.log(window.document.title);  // Display the title of the current document

• Trong ví dụ này, tiêu đề của tài liệu hiện tại được hiển thị.

2. window.localStorage / window.sessionStorage window.localStorage và window.sessionStorage là các thuộc tính dùng để truy cập tính năng lưu trữ cho phép lưu dữ liệu người dùng trong trình duyệt.

1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'

• Trong ví dụ này, dữ liệu được lưu vào localStorage, sau đó được lấy ra và hiển thị.

3. window.location window.location là một đối tượng dùng để lấy và xử lý thông tin về URL hiện tại. Bạn có thể thực hiện chuyển hướng và thay đổi URL.

1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page

• Trong ví dụ này, URL được hiển thị và người dùng sẽ được chuyển hướng sang trang khác.

4. window.setTimeout / window.setInterval window.setTimeout và window.setInterval là các phương thức được sử dụng để chạy các hàm sau một khoảng thời gian trễ hoặc theo chu kỳ đều đặn.

1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);

• Đoạn mã này thực thi một quy trình xuất ra thông báo lên bảng điều khiển sau hai giây.

5. window.alert / window.confirm / window.prompt alert, confirm và prompt hiển thị các hộp thoại để thông báo hoặc yêu cầu người dùng nhập dữ liệu.

1window.alert('Alert message');

• Đoạn mã này hiển thị hộp thoại cảnh báo để thông báo một tin nhắn.

Các sự kiện của đối tượng window

Vì window là một phần của DOM, bạn cũng có thể lắng nghe các sự kiện trực tiếp. Trong TypeScript, kiểu dữ liệu sẽ được tự động hoàn thành, nên nếu sử dụng sai tên sự kiện hoặc thuộc tính sẽ gây ra lỗi.

Sự kiện thay đổi kích thước cửa sổ

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});

• Đoạn mã này sẽ xuất chiều rộng và chiều cao mới lên bảng điều khiển khi kích thước cửa sổ thay đổi.

Sự kiện bàn phím

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});

• Đoạn mã này sẽ xuất phím đã được nhấn lên bảng điều khiển khi người dùng nhấn một phím.

Sự kiện tải trang

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});

• Đoạn mã này sẽ xuất một thông báo lên bảng điều khiển khi trang đã tải xong.

Ghi chú

• Trong TypeScript, các kiểu đối tượng sự kiện sẽ được suy luận, vì vậy chú ý đến các kiểu như KeyboardEvent hoặc MouseEvent sẽ làm cho mã của bạn an toàn hơn.

• Nên loại bỏ các bộ lắng nghe sự kiện khi không còn cần thiết. Bạn có thể gỡ bỏ các trình lắng nghe bằng phương thức window.removeEventListener.

1function handleClick() {
2  console.log("Clicked!");
3}
4
5// Add event listener
6window.addEventListener("click", handleClick);
7
8// Remove event listener
9window.removeEventListener("click", handleClick);

• Đoạn mã này minh họa một ví dụ về việc thêm và sau đó gỡ bỏ bộ lắng nghe cho sự kiện nhấp chuột.

Khi thêm các thuộc tính tùy chỉnh

Khi thêm các thuộc tính tùy chỉnh vào đối tượng window, cần mở rộng kiểu trong TypeScript để tránh lỗi kiểu.

1// Add a custom property to the window
2interface Window {
3    myCustomProperty: string;
4}
5
6window.myCustomProperty = "Hello, World!";
7console.log(window.myCustomProperty);  // "Hello, World!"

• Đoạn mã này là ví dụ về việc thêm một thuộc tính tùy chỉnh vào đối tượng window trong TypeScript, gán giá trị và hiển thị nó.

Lưu ý khi sử dụng đối tượng toàn cục window

Do TypeScript kiểm tra kiểu nghiêm ngặt, việc cố gắng sử dụng các thuộc tính hoặc phương thức không tồn tại sẽ gây ra lỗi. Chẳng hạn, việc cố gắng truy cập một thuộc tính không tồn tại trên đối tượng window sẽ gây ra lỗi, vì vậy bạn cần mở rộng kiểu một cách phù hợp.

Như vậy, đối tượng window đóng vai trò trung tâm trong việc truy cập các tính năng khác nhau của ứng dụng trình duyệt, và trong TypeScript, bạn có thể sử dụng nó một cách an toàn nhờ khả năng kiểm tra kiểu.

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