«Could not find a declaration file» : comment faire ami-ami TypeScript avec n'importe quel module JS

L'erreur « invisible » que tout développeur TypeScript connaît

Vous écrivez du code en TypeScript, tout se passe bien, mais soudain — une ligne ondulée rouge sous l'import. Le compilateur annonce quelque chose d'effrayant : Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type. Si vous avez déjà travaillé avec TypeScript, vous avez très probablement rencontré ce message. Il apparaît lorsque vous essayez d'importer un module JavaScript pour lequel il n'existe pas de fichier de déclaration (généralement avec l'extension .d.ts).

Sur Stack Overflow, cette question a recueilli des milliers de vues. Et ce n'est pas un hasard : le problème semble complexe, alors qu'il a en réalité plusieurs solutions simples et élégantes. Dans cet article, nous verrons pourquoi l'erreur se produit et comparerons quatre approches principales pour la résoudre. Vous apprendrez quelle méthode choisir en fonction de la situation et pourrez oublier à jamais les types « invisibles ».

Pourquoi TypeScript exige-t-il une déclaration ?

TypeScript est une surcouche de JavaScript qui ajoute le typage statique. Lorsque vous écrivez import * as _ from 'lodash', TypeScript doit connaître les types de la variable _. Si aucun fichier .d.ts n'existe pour le module, le compilateur ne peut pas vérifier les types et attribue par défaut le type any au module. Cela rompt la rigueur du typage, c'est pourquoi TypeScript vous avertit. En réalité, ce n'est pas une erreur d'exécution, mais un avertissement de compilation, mais dans les projets stricts (strict: true), il peut bloquer la construction.

Passons maintenant aux solutions. Nous examinerons quatre approches, de la plus simple à la plus flexible.

Solution 1 : Rapide et sale — declare module

La méthode la plus simple est de créer un fichier de déclaration manuellement. Pour cela, ajoutez à votre projet un fichier global.d.ts (ou types.d.ts) et écrivez :

// global.d.ts\ndeclare module 'module-name';

Cette ligne dit à TypeScript : « Le module existe, mais son type est any ». Le problème est résolu, mais vous perdez tous les avantages du typage. Cette approche est bonne pour les prototypes rapides ou lorsque le module est utilisé à un ou deux endroits. Cependant, pour les projets de production, ce n'est pas le meilleur choix.

\n
• Avantages : Minimum de code, ne nécessite pas l'installation de paquets.
\n
• Inconvénients : Le type any tue le sens de TypeScript ; si le module est mis à jour, vous ne saurez pas que l'API a changé.
\n

Solution 2 : Utilisation des paquets @types

Pour la plupart des modules npm populaires, il existe des paquets séparés avec des déclarations. Par exemple, pour lodash, c'est @types/lodash. Installez-les via npm ou yarn :

npm install --save-dev @types/lodash

Après cela, TypeScript trouvera automatiquement les déclarations et l'erreur disparaîtra. Si vous utilisez TypeScript 2.0+, il cherche lui-même le dossier @types. C'est la méthode standard et recommandée.

\n
• Avantages : Typage complet, support de la communauté, mises à jour automatiques.
\n
• Inconvénients : Tous les modules n'ont pas de @types (par exemple, pour les bibliothèques peu connues).
\n

Comment vérifier si les types existent ? Rendez-vous sur la page npm ou exécutez npm info @types/nom-du-module. Si le paquet n'est pas trouvé, passez à la solution suivante.

Solution 3 : Activation de allowJs et checkJs

Si vous écrivez un projet qui mélange TypeScript et JavaScript, vous pouvez autoriser le compilateur à vérifier les fichiers JS. Pour cela, dans tsconfig.json, ajoutez :

{\n  "compilerOptions": {\n    "allowJs": true,\n    "checkJs": false\n  }\n}

L'option allowJs permet d'importer des modules JS dans des fichiers TS. TypeScript essaiera alors de