Fenêtre d'extension TypeScript

1. Objet window TypeScript
2. Déclarer une nouvelle propriété dans l’objet Window dans TypeScript
3. Fusion de déclaration d’interface dans TypeScript

Cet article montre comment étendre une window TypeScript.

Objet window TypeScript

Une window est un objet intégré défini dans le navigateur. C’est l’objet window qui contient un document DOM.

Vous devrez peut-être accéder aux propriétés et fonctions associées à l’objet window du navigateur. L’objet window intégré contient de nombreuses propriétés et fonctions utiles prêtes à l’emploi.

Certaines des propriétés et fonctions de l’objet window fréquemment utilisées sont répertoriées ci-dessous.

1. Propriétés : EventTarget, document, console, event, localStorage, onLoad, etc.
2. Méthodes : addEventListener, fetch, alert, atob, btoa, open, prompt, print, etc.

Habituellement, TypeScript définit ses types dans différents modules. Ainsi, le type window est défini dans le module lib.dom.

Dans certains scénarios, les méthodes et propriétés intégrées ne suffisent pas. Chaque fois que votre projet TypeScript utilise les bibliothèques Google Analytics ou Tag Manager, ces scripts peuvent ne pas être chargés par votre code.

Par conséquent, nous avons besoin d’un moyen de communiquer avec ces outils tiers via les propriétés et les méthodes de l’objet window.

Déclarer une nouvelle propriété dans l’objet Window dans TypeScript

En JavaScript, il est assez simple de déclarer une nouvelle propriété ou méthode dans l’objet intégré window. Nous pouvons utiliser les méthodes suivantes pour définir une nouvelle propriété dans l’objet window avec JavaScript.

window.myProp = 'newly declared property';
window['myProp'] = 'newly declared property';

Examinons l’objet window dans la console du navigateur.

console.log(window);

Production:

Dans TypeScript, les approches ci-dessus ne fonctionneraient pas. Si nous essayons de déclarer une nouvelle propriété dans l’objet window comme en JavaScript, TypeScript renverra une erreur, comme illustré ci-dessous.

window.anotherNewProp = 'this is a property on window object in typescript';

Production:

Généralement, un type d’objet TypeScript est basé sur une classe ou une interface. Disons que nous avons une classe appelée Animal, comme indiqué ci-dessous.

class Animal {
    name: string;
    color: string;
}

Créons un objet Animal et attribuons des valeurs aux propriétés name et color.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';

Le code ci-dessus se compilera sans aucun problème.

Ensuite, nous allons essayer de déclarer une nouvelle propriété numberOfLegs sur le même objet Animal et lui attribuer une valeur.

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';
newAnimal.numberOfLegs = 4;

Il lève une erreur. Nous ne pouvons pas déclarer de nouvelles propriétés d’objet comme celle-ci dans TypeScript.

Pour résoudre ce problème, nous devons d’abord ajouter la propriété numberOfLegs à la classe Animal.

C’est le même problème avec l’objet intégré window également. La principale préoccupation est que l’objet window TypeScript n’est pas créé par nous-mêmes.

Il est livré avec un navigateur. Par conséquent, nous avons besoin d’un moyen approprié d’ajouter une propriété à cet objet intégré.

Fusion de déclaration d’interface dans TypeScript

TypeScript prend en charge la technique de fusion de déclaration prête à l’emploi. Le type de fusion de déclaration le plus simple est la fusion d’interface.

Chaque fois que plusieurs interfaces sont déclarées avec le même nom, TypeScript fusionne toutes les déclarations d’interfaces en une seule.

L’objet window intégré est basé sur l’interface window de TypeScript. Par conséquent, nous pouvons utiliser la technique de fusion d’interface TypeScript pour ajouter une nouvelle propriété à l’interface intégrée.

Créons une nouvelle interface nommée window.

interface Window {
    myProp: string;
}

Ensuite, nous allons essayer d’accéder à la propriété myProp dans l’objet window.

interface Window {
    myProp: string;
}

window.myProp = 'typescript window object property';

Production:

Il n’y a pas de problèmes soulevés par le compilateur TypeScript cette fois. La définition de nouvelles propriétés ou méthodes dans l’objet window est recommandée si vous considérez les types.

S’il n’y a pas de soucis sur les types, la syntaxe suivante peut être utilisée pour déclarer de nouvelles propriétés sur l’objet window.

(<any>.window).myProp = 'typescript property on window object';

Vous pouvez également déclarer des fonctions.

(<any>.window).NewFunction = () => {
    console.log('new function on window object');
}

Les deux techniques peuvent être utilisées avec TypeScript pour ajouter de nouvelles propriétés ou méthodes à l’objet window. Le choix vous appartient en fonction du contexte.