Comment importer un fichier Json en TypeScript et éviter l'erreur Property primaryMain does not exist on typeof ?
Le langage TypeScript est un langage qui est compilé pour être ensuite transformé en code JavaScript. Il apporte un typage plus fort pour que l'on ait ainsi un langage plus proche de C# ou C++. Comme en JavaScript, il est possible d'importer des fichiers JSON sous la forme de module. Vous devez faire cependant attention à la manière dont vous écrivez vos directives afin d'éviter un message d'erreur "Property does not exist on typeof".
Lors de la sortie de la version 2.9 du langage, de nouvelles options ont été ajoutées, et elles permettent d'importer plus facilement un fichier JSON. Voici un exemple de fichier JSON à importer :
{
"firstColor": "red",
"secondColor": "white"
}
Pour pouvoir utiliser facilement ce fichier, il existe des directives de configuration qui peuvent vous aider. Elles se configurent dans le fichier de configuration du langage TypeScript "tsconfig.json". La directive "resolveJsonModule" permet d'indiquer que l'on importe automatiquement un module JSON. Fixez sa valeur à true. La directive "esModuleInterop" permet de faire fonctionner l'import par défaut avec les fichiers JSON. Vous pouvez l'activer afin d'avoir une instruction plus courte pour importer le fichier. Cependant, cela peut générer des erreurs si d'autres modules que vous utilisez ne sont pas compatibles. Dans ce cas, ne l'activez pas et utilisez la directive d'import plus longue, avec la mention "*".
//Fichier tsconfig.json "resolveJsonModule": true, "esModuleInterop": true, //Dans votre code //Avec la directive "esModuleInterop" à true import colors from '../colors.json'; //Avec la directive "esModuleInterop" à false import * as colors from '../colors.json'; //Utilisation console.log(colors.firstColor);