web-dev-qa-db-fra.com

Ai-je besoin d'une autorisation allowSyntheticDefaultImports explicite si esModuleInterop a la valeur true pour la configuration de la transpilation TypeScript?

J'ai besoin de confirmation sur la théorie suivante. Selon TS docs , deux options peuvent être définies dans tsconfig.json.

  1. - --allowSyntheticDefaultImports: Autorise les importations par défaut à partir de modules sans exportation par défaut. Cela n'affecte pas le code émis, il suffit de vérifier le texte. 

  2. --esModuleInterop: Emit les aides __importStar et __importDefault pour la compatibilité de l'écosystème babel au moment de l'exécution et active --allowSyntheticDefaultImports pour la compatibilité du système de type.

Lorsque je navigue sur Google, je vois que les deux sont réglés sur vrai (du moins en ce qui concerne le comportement que je vise). Cependant, pour autant que je comprenne la documentation, TS et la transpilation en JS, il n’a aucun sens de les utiliser tous les deux.

La façon dont je figure, je pourrais utiliser le dernier seulement et supprimer complètement le premier. Cependant, étant prudent et humble, je ne suis pas tout à fait certain et crains de faire quelque chose de moins brillant sans m'en rendre compte pour le moment.

Je crains que ce ne soit quelque chose d'inapproprié qui me morde à l'âne plus tard, provoquant des heures de lamentations et d'arrachage de poils tout en cherchant désespérément à résoudre les problèmes. Le scepticisme est fondé sur le fait que les deux options sont disponibles. Je suppose donc qu'il y a quatre cas où toutes les combinaisons (vrai/faux etc.) sont obligatoires, mais je ne peux pas imaginer ce qu'elles sont. .

Est-il tout à fait sûr de sauter --allowSyntheticDefaultImports} _ si --esModuleInterop: true dans compilerOptions? Et si oui, pourquoi avons-nous cette option?

Question bonus: quand est-il nécessaire avec les quatre combinaisons (vrai/faux) pour ces deux options?

4
Konrad Viltersten

Si vous voulez dire que vous pouvez laisser allowSyntheticDefaultImports undefined et définir uniquement esModuleInterop, la réponse devrait être OUI, mais cela pose un problème. PR # 26866 semble être une solution, fusionné le 17 septembre, donc il pourrait y avoir un risque à court terme. 

En raison de la présence de ces deux éléments, je pense que ceux-ci faisaient partie de la résolution des problèmes de compatibilité liés à l’importation de modules transposés dans Babel, le PR initial a ajouté l’option allowSyntheticDefaultImports à certains messages de compilation, mais elle n’a pas traité le comportement à la importations. So --esModuleInterop a été ajouté plus tard. Voir TypeScript-Handbook/# 816 pour une discussion sur la façon de mettre à jour la documentation ... 

3
Burt_Harris

D'après ce que j'ai compris, la variable allowSyntheticDefaultImports permet de charger les bibliothèques CommonJS de manière plus simple si vous ciblez es6 + (dans le temps de développement), tandis que esModuleInterop sert à simplifier ces importations (au moment de l'exécution) si vous ciblez par exemple ).

Selon la documentation, vous ne devriez pas avoir besoin de spécifier explicitement allowSyntheticDefaultImports si vous avez activé esModuleInterop, mais la raison pour laquelle j'ai également dû activer la allowSyntheticDefaultImports est que Resharper semble regarder cet indicateur lors de la vérification de la syntaxe dans Visual Studio. Bien sûr, il a construit et fonctionné de toute façon avec seulement esModuleInterop, mais j'ai reçu beaucoup d'avertissements rouges de Resharper jusqu'à ce que j'active également l'autre drapeau.

0
Souldrinker