Articles
Введение в TypeScript
Объект window в TypeScript

Объект window в TypeScript

В этой статье объясняется объект window в TypeScript.

Вы можете изучить свойства и методы объекта window с помощью кода.

YouTube Video

Объект window в TypeScript

window — это глобальный объект в TypeScript и JavaScript, представляющий все окно браузера. Он включает множество свойств и методов для доступа к API браузера, манипулирования DOM (Document Object Model), использования таймеров, хранилища и других функций.

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!"
  • Этот код является примером добавления пользовательского свойства к объекту window в TypeScript, назначения значения и его отображения.

Предостережения при использовании глобального объекта window

Из-за строгой проверки типов в TypeScript попытка использовать несуществующие свойства или методы приведет к ошибкам. Например, попытка получить доступ к несуществующему свойству объекта window как есть вызовет ошибку, поэтому нужно правильно расширить тип.

Таким образом, объект window играет центральную роль в доступе к различным функциям браузерных приложений, и в TypeScript вы можете безопасно его использовать, благодаря проверке типов.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Генераторные функции в TypeScriptМанипуляция DOM в TypeScript