Bonsoir,
Je crois (enfin j’en suis sûr ) que j’ai quelques lacunes en JavaScript/TypeScript…
Je vous explique ce qui m’a rendu dingue aujourd’hui :
Je développe un projet web avec Angular et donc en TypeScript.
Aujourd’hui, je suis confronté à une problématique. Je souhaite intégrer la librairie https://github.com/oakmac/chessboardjs/
D’habitude pour importer une librairie, j’utilise classiquement npm :
npm i nom_du_package --save
Puis je l’utilise en important la classe dans mon composant :
import { nomDeMaClasse } from 'package_name';
Sauf qu’ici, ça ne fonctionne pas… J’obtiens dans la console du navigateur une erreur (à la ligne où j’utilise la classe importée) :
module_0_chessboard is not defined
J’ai l’impression que la librairie est faite pour un usage via "une balise script dans un fichier HTML".
J’ai trouvé une solution pour l’importer comme un "script externe" https://medium.com/@clintpitzak/how-to-use-external-javascript-libraries-in-angular-8–247baacbdccf. Cela consiste à ajouter le script dans la balise script
du angular.json
et d’ajouter dans mon composant Angular :
declare var Chessboard: any;
Sauf que je ne comprends pas vraiment cette solution. Et puis, ce problème m’arrive également pour d’autres librairies du même type. Puis devant le nombre de questions sur Stackoverflow, j’imagine qu’il s’agit d’un "type" de librairie particulier.
Qu’est-ce qui fait qu’une librairie n’est pas "importable" directement dans un composant Angular ? Y’a t’il un lien avec les concepts de ES module, commonjs (que je ne maîtrise pas) ?
Cette solution utilise la notation : declare var Chessboard: any;
Cela permet d’exprimer que la classe Chessboard
a déjà été initialisée ailleurs (d’après ce que j’ai lu). Sauf que cela me dérange car je n’ai pas de types TypeScript (sachant qu’elle est de type any
). Je peux certes les définir directement dans mon composant. Par exemple :
declare var Chessboard = {
// je mets les types ici
};
Mais n’y aurait-il pas moyen d’utiliser un fichier .d.ts
que j’aurais packagé au préalable dans un fork de la librairie ? Cela m’éviterait d’avoir des dizaines de lignes de déclarations de types dans mon composant Angular…
Merci beaucoup pour votre aide
Si vous pensez que certaines lectures s’imposent, n’hésitez pas !