L'objet window dans TypeScript

Cet article explique l'objet window en TypeScript.

Vous pouvez découvrir les propriétés et les méthodes de l'objet window à travers du code.

YouTube Video

L'objet window dans TypeScript

window est un objet global dans TypeScript et JavaScript représentant toute la fenêtre du navigateur. Il inclut de nombreuses propriétés et méthodes pour accéder aux API du navigateur, manipuler le DOM (Document Object Model), utiliser des minuteries, le stockage et d'autres fonctionnalités.

tsconfig.json et l'objet window

Dans TypeScript, lors de l'accès à l'objet window, les fonctionnalités globales spécifiques au navigateur disposent de définitions de types, permettant l'autocomplétion dans l'éditeur et la vérification des types. Grâce au fichier de définition de type standard de TypeScript (lib.dom.d.ts), TypeScript reconnaît diverses propriétés et méthodes de l'objet window.

Lors de l'utilisation de TypeScript, il est courant de placer un fichier tsconfig.json à la racine du projet. Ce fichier sert à spécifier les options du compilateur et la portée des fichiers de définition de types.

Lorsqu'on travaille avec window, il est particulièrement important d'activer les définitions de types du navigateur (définitions de types DOM). Sans cela, window et document entraîneront des erreurs de type.

 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}

• En spécifiant "lib": ["es6", "dom"], les types de window et document seront correctement reconnus et complétés automatiquement.

Principales propriétés et méthodes de window

1. window.document window.document est une propriété utilisée pour accéder au DOM de la page. Vous pouvez récupérer des éléments et apporter des modifications au DOM.

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

• Dans cet exemple, le titre du document actuel est affiché.

2. window.localStorage / window.sessionStorage window.localStorage et window.sessionStorage sont des propriétés utilisées pour accéder aux fonctions de stockage permettant d'enregistrer des données utilisateur dans le navigateur.

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

• Dans cet exemple, les données sont enregistrées dans le localStorage, puis récupérées et affichées.

3. window.location window.location est un objet utilisé pour récupérer et manipuler des informations concernant l'URL actuelle. Vous pouvez effectuer des redirections et modifier les URLs.

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

• Dans cet exemple, l'URL est affichée et l'utilisateur est redirigé vers une autre page.

4. window.setTimeout / window.setInterval window.setTimeout et window.setInterval sont des méthodes utilisées pour exécuter des fonctions après un délai ou à intervalles réguliers.

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

• Ce code exécute un processus qui affiche un message dans la console après deux secondes.

5. window.alert / window.confirm / window.prompt alert, confirm et prompt affichent des boîtes de dialogue pour présenter des alertes ou demander des saisies à l'utilisateur.

1window.alert('Alert message');

• Ce code affiche une boîte de dialogue d'alerte pour notifier un message.

Événements de l'objet window

Comme window fait partie du DOM, vous pouvez également écouter des événements directement. En TypeScript, les types sont complétés automatiquement, donc l'utilisation de noms d'événements ou de propriétés incorrects provoquera des erreurs.

Événement de redimensionnement de la fenêtre

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

• Ce code affiche la nouvelle largeur et la nouvelle hauteur dans la console lorsque la taille de la fenêtre change.

Événement clavier

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

• Ce code affiche la touche enfoncée dans la console lorsque l'utilisateur appuie sur une touche.

Événement de chargement de la page

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

• Ce code affiche un message dans la console lorsque la page a fini de charger.

Notes

• En TypeScript, les types des objets d'événement sont inférés, donc être attentif aux types comme KeyboardEvent ou MouseEvent rend votre code plus sûr.

• Il est recommandé de supprimer les écouteurs d'événements lorsqu'ils ne sont plus nécessaires. Vous pouvez supprimer des écouteurs en utilisant la méthode 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);

• Ce code montre un exemple d'ajout puis de suppression d'un écouteur pour un événement de clic.

Lors de l'ajout de propriétés personnalisées

Lors de l'ajout de propriétés personnalisées à l'objet window, une extension de type est nécessaire dans TypeScript pour éviter les erreurs de type.

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

• Ce code est un exemple d'ajout d'une propriété personnalisée à l'objet window en TypeScript, de définition d'une valeur et de son affichage.

Précautions lors de l'utilisation de l'objet global window

En raison de la vérification stricte des types dans TypeScript, tenter d'utiliser des propriétés ou méthodes inexistantes entraînera des erreurs. Par exemple, tenter d'accéder à une propriété inexistante de l'objet window tel quel provoquera une erreur ; vous devez donc étendre correctement le type.

Ainsi, l'objet window joue un rôle central dans l'accès à diverses fonctionnalités des applications pour navigateur, et dans TypeScript, vous pouvez l'utiliser en toute sécurité grâce à la vérification des types.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video