Articles
TypeScript简介
TypeScript 中的 window 对象

TypeScript 中的 window 对象

本文解释了TypeScript中的window对象。

你可以通过代码了解window对象的属性和方法。

YouTube Video

TypeScript 中的 window 对象

window 是 TypeScript 和 JavaScript 中的一个全局对象，代表整个浏览器窗口。它包含许多属性和方法，可用于访问浏览器 API、操作 DOM（文档对象模型）、使用定时器、存储和其他功能。

tsconfig.json与window对象

在 TypeScript 中，访问 window 对象时，浏览器特定的全局功能具有类型定义，可以启用编辑器自动补全和类型检查。由于 TypeScript 的标准类型定义文件（lib.dom.d.ts），TypeScript 能识别 window 对象的各种属性和方法。

使用TypeScript时，通常会在项目根目录放置一个tsconfig.json文件。该文件用于指定编译器选项和类型定义文件的范围。

在使用window时，特别需要启用浏览器类型定义（DOM类型定义）。如果没有启用，window和document会导致类型错误。

 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}
  • 通过指定"lib": ["es6", "dom"]，window和document的类型将被正确识别并提供自动补全。

主要的 window 属性和方法

  1. window.document window.document是用于访问页面DOM的属性。您可以检索元素并对 DOM 进行更改。
1console.log(window.document.title);  // Display the title of the current document
  • 在此示例中，将显示当前文档的标题。
  1. window.localStorage / window.sessionStorage window.localStorage和window.sessionStorage是用于访问存储功能的属性，可以在浏览器中保存用户数据。
1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'
  • 在此示例中，数据被保存到 localStorage，然后被检索并显示出来。
  1. window.location window.location是用于获取和操作当前URL信息的对象。您可以执行重定向并更改 URL。
1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page
  • 在此示例中，将显示URL，并将用户重定向到另一个页面。
  1. window.setTimeout / window.setInterval window.setTimeout和window.setInterval是用于延时或定时执行函数的方法。
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • 此代码在两秒后向控制台输出一条信息。
  1. window.alert / window.confirm / window.prompt alert、confirm和prompt用于显示对话框，以提示或请求用户输入。
1window.alert('Alert message');
  • 此代码显示一个警告对话框以通知消息。

window对象的事件

由于window是DOM的一部分，你也可以直接监听事件。在TypeScript中，类型会自动补全，因此使用错误的事件名或属性会导致错误。

窗口缩放事件 

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});
  • 此代码在窗口大小变化时向控制台输出新的宽度和高度。

键盘事件 

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});
  • 此代码在用户按下按键时将按下的按键输出到控制台。

页面加载事件 

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});
  • 此代码在页面加载完成后向控制台输出一条信息。

注意

  • 在TypeScript中，事件对象类型会被推断，所以注意使用如KeyboardEvent或MouseEvent等类型可以让你的代码更安全。

  • 建议在不再需要时移除事件监听器。你可以使用 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);
  • 此代码展示了为点击事件添加监听器然后又移除监听器的示例。

添加自定义属性时

在 window 对象上添加自定义属性时，在 TypeScript 中需要进行类型扩展以避免类型错误。

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!"
  • 此代码是在 TypeScript 中向 window 对象添加自定义属性、设置值并显示的示例。

使用全局 window 对象时的注意事项

由于 TypeScript 的严格类型检查，尝试使用不存在的属性或方法将导致错误。例如，尝试直接访问 window 对象上不存在的属性会导致错误，因此需要正确扩展类型。

因此，window 对象在访问浏览器应用程序的各种功能中起到了核心作用，在 TypeScript 中可以通过利用类型检查安全地使用它。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

TypeScript 中的生成器函数TypeScript中的DOM操作