O objeto window no TypeScript

Este artigo explica o objeto window no TypeScript.

Você pode aprender sobre as propriedades e métodos do objeto window através do código.

YouTube Video

O objeto window no TypeScript

window é um objeto global no TypeScript e JavaScript que representa toda a janela do navegador. Inclui várias propriedades e métodos para acessar APIs do navegador, manipular o DOM (Modelo de Objeto de Documento), usar temporizadores, armazenamento e outros recursos.

tsconfig.json e o objeto window

No TypeScript, ao acessar o objeto window, os recursos globais específicos do navegador possuem definições de tipo, permitindo autocompletar no editor e verificar tipos. Graças ao arquivo padrão de definição de tipos do TypeScript (lib.dom.d.ts), o TypeScript reconhece várias propriedades e métodos do objeto window.

Ao usar TypeScript, é comum colocar um arquivo tsconfig.json na raiz do projeto. Esse arquivo é usado para especificar opções do compilador e o escopo dos arquivos de definição de tipos.

Ao trabalhar com window, é especialmente importante habilitar definições de tipo do navegador (definições de tipo do DOM). Sem isso, window e document resultarão em erros de tipo.

 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}

• Ao especificar "lib": ["es6", "dom"], os tipos de window e document serão corretamente reconhecidos e terão autocomplementação.

Principais propriedades e métodos do window

1. window.document window.document é uma propriedade usada para acessar o DOM da página. Você pode recuperar elementos e fazer alterações no DOM.

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

• Neste exemplo, o título do documento atual é exibido.

2. window.localStorage / window.sessionStorage window.localStorage e window.sessionStorage são propriedades usadas para acessar recursos de armazenamento que permitem salvar dados do usuário no navegador.

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

• Neste exemplo, os dados são salvos no localStorage, depois recuperados e exibidos.

3. window.location window.location é um objeto usado para recuperar e manipular informações sobre a URL atual. Você pode realizar redirecionamentos e alterar URLs.

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

• Neste exemplo, a URL é exibida e o usuário é redirecionado para outra página.

4. window.setTimeout / window.setInterval window.setTimeout e window.setInterval são métodos usados para executar funções após um atraso ou em intervalos regulares.

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

• Este código executa um processo que exibe uma mensagem no console após dois segundos.

5. window.alert / window.confirm / window.prompt alert, confirm e prompt exibem caixas de diálogo para mostrar alertas ou solicitar entrada do usuário.

1window.alert('Alert message');

• Este código exibe uma caixa de diálogo de alerta para notificar uma mensagem.

Eventos do objeto window

Como window faz parte do DOM, você também pode escutar eventos diretamente. No TypeScript, os tipos são autocompletados, então usar nomes de eventos ou propriedades incorretos causará erros.

Evento de redimensionamento da janela

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

• Este código exibe a nova largura e altura no console quando o tamanho da janela é alterado.

Evento do teclado

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

• Este código exibe no console a tecla pressionada quando o usuário pressiona uma tecla.

Evento de carregamento da página

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

• Este código exibe uma mensagem no console quando a página termina de carregar.

Notas

• No TypeScript, os tipos de objetos de evento são inferidos, então estar atento a tipos como KeyboardEvent ou MouseEvent torna seu código mais seguro.

• Recomenda-se remover os ouvintes de eventos quando eles não forem mais necessários. Você pode remover ouvintes usando o método 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);

• Este código mostra um exemplo de como adicionar e depois remover um ouvinte para um evento de clique.

Ao adicionar propriedades personalizadas

Ao adicionar propriedades personalizadas ao objeto window, é necessário estender o tipo no TypeScript para evitar erros de tipo.

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!"

• Este código é um exemplo de como adicionar uma propriedade personalizada ao objeto window em TypeScript, definir um valor e exibi-lo.

Cuidados ao usar o objeto global window

Devido à rigorosa verificação de tipos do TypeScript, tentar usar propriedades ou métodos inexistentes resultará em erros. Por exemplo, tentar acessar uma propriedade inexistente no objeto window como está causará um erro, portanto você precisa estender o tipo adequadamente.

Dessa forma, o objeto window desempenha um papel central no acesso a vários recursos de aplicações no navegador, e no TypeScript, você pode usá-lo com segurança aproveitando a verificação de tipos.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video