Etendre le type Window avec Typescript
Emmanuel Gautier / November 27, 2021
2 min read
Lors du développement d'une application TypeScript, vous devez parfois accéder aux propriétés ou aux fonctions de l'objet "Window". Certaines de ces propriétés ou fonctions ne sont pas disponibles dans l'objet window
défini par le navigateur. Ceux-ci peuvent être définis par des bibliothèques tierces que vous pouvez ajouter à vos pages comme Google Tag Manager par exemple. Pour cette raison, vous devez étendre le type de Window avec les propriétés ou les fonctions auxquelles vous devez accéder.
Type de Window avec TypeScript
Le type Window
est défini dans le module de TypeScript lib.dom
. Vous pouvez trouver la définition du type Window
dans la documentation de TSDoc.
Quand pouvez-vous avoir de nouvelles propriétés non définies par votre code dans l'objet Window
? Par exemple, lorsque vous souhaitez ajouter Google Tag Manager ou Google Analytics à votre page. Ces scripts ne sont pas chargés directement par votre code, mais vous pouvez communiquer avec eux via certaines propriétés d'objet de Window. Pour Google Tag Manager, la propriété datalayer
est ajoutée et certaines fonctions sont également ajoutées.
Dans ce cas, vous aurez l'erreur suivante :
Property does not exist on type 'window & typeof globalthis'
Étendre le type Window avec les propriétés manquantes
Afin d'étendre le type Window, vous devez ajouter les propriétés ou fonctions manquantes.
L'extrait de code suivant étendra le type 'Window' avec les propriétés ou fonctions manquantes.
declare global {
interface Window {
gtag: (...args: any[]) => void
dataLayer: Record<string, any>
}
}
N'oubliez pas d'ajouter le fichier contenant cet extrait à la liste des fichiers de projet pour la compilation Typescript. Dans un projet NextJS, vous pouvez ajouter l'extrait de code dans le fichier globals.d.ts
.
J'espère que cet article vous aidera à éviter cette erreur Typescript.
Consulting
Si vous recherchez des solutions à un problème ou avez besoin de conseils, je suis là pour vous aider ! N'hésitez pas à réserver un call avec moi pour une session de consulting personnalisée. Discutons de votre situation et trouvons ensemble la meilleure solution à implémenter.
Articles sur le même sujet
Starter Gatsby + Netlify CMS + TailwindCSS
Avec le nombre de sites web generés avec les mêmes outils, j'essaie au maximum de mutualiser l'effort de maintenance de la stack technique commune. Suivant ce principe, je viens de créer un starter qui vient du développement de mes autres sites.
Starter Gatsby + Netlify CMS + TailwindCSS
Avec le nombre de sites web generés avec les mêmes outils, j'essaie au maximum de mutualiser l'effort de maintenance de la stack technique commune. Suivant ce principe, je viens de créer un starter qui vient du développement de mes autres sites.
Comment récupérer la chaine de charactères HTML d'un composant React
Dans plusieurs cas, vous pourriez avoir besoin d'avoir la chaine de charactère représentant le HTML généré plutôt que le composant React. Le moyen le plus simple est d'utiliser la fonction renderToString du package react-dom.
Articles mis en avant
Comment activer la vérification de typage pour Python dans VSCode
Python supporte désormais le [type hints](https://docs.python.org/3/library/typing.html). Dans cet article, nous allons voir comment avoir de l'IntelliSense pour le typage ainsi qu'avoir les erreurs de typage sur Visual Studio Code.
Comment gérer l'internationalisation avec NextJS SSG
Générer statiquement un site avec le framework NextJS pour différentes langues n'est pas si simple.
Utilisateurs et privilèges sous MySQL
L'administration d'une base de données inclue la gestion des utilisateurs et de leurs privilèges. La plupart du temps, une interface graphique, telle que MySQL Workbench ou PHPMyAdmin, est disponible pour réaliser de façon simple les actions liées à cette gestion. Dans ce tutoriel, nous allons voir comment réaliser la gestion des utilisateurs MySQL au moyen de requêtes SQL.