web-dev-qa-db-fra.com

TypeScript dans Visual Studio 2017: l'inclusion de définition automatique provoque des erreurs d'identificateur en double

UPDATE: J'ai une solution de contournement qui rend les choses acceptables, sans piratage. Je laisse mes tentatives antérieures décrites ci-dessous pour la postérité. Voir la réponse pour la solution de travail.

Je viens de mettre à niveau un projet vers Visual Studio 2017 et je reçois soudainement toutes sortes d'erreurs TypeScript. Beaucoup d'entre eux sont des erreurs Duplicate identifier. Lorsque je double-clique sur l'une des erreurs, un fichier appelé index.d.ts est ouvert, situé dans un répertoire tel que:

C:\Users\[me]\AppData\Local\Microsoft\TypeScript\node_modules\@types\jquery\index.d.ts

D'après ce que j'ai lu sur cette page:

https://blogs.msdn.Microsoft.com/visualstudio/2016/11/28/more-productive-javascript-in-visual-studio-2017-rc/

... il semble que Visual Studio essaie de télécharger utilement les fichiers de définition pour les types pour lesquels j'ai déjà inclus manuellement les fichiers de définition. L'inclusion automatique de fichiers de définition semble être une excellente fonctionnalité! Je vais juste supprimer ceux inclus manuellement, non? Mais rien de ce que je fais ne semble fonctionner. J'espère que quelqu'un pourra me dire où je me trompe.

Pour l’arrière-plan, voici comment je fonctionnais dans Visual Studio 2015. J'utilisais trois bibliothèques: jQuery, jQuery UI et QUnit. J'ai simplement téléchargé les fichiers .d.ts de DefinitelyTyped et les ai placés dans le répertoire Scripts de mon projet. Tout a fonctionné correctement jusqu'à l'ouverture du projet dans VS 2017.

D'après les messages d'erreur, il semble que Visual Studio 2017 apporte ses propres fichiers de définition. J'ai donc pensé supprimer ceux que j'avais apportés manuellement. Cependant, lorsque je le fais, je reçois maintenant des tonnes d'erreurs Cannot find name $, ce qui semble signifier que ces fichiers de définition ne sont plus importés pour une raison quelconque.

Ensuite, j'ai pensé que le problème était peut-être que je n'avais pas réellement les fichiers source de JQuery (et d'autres bibliothèques) dans mon projet. Je ne fais que les référencer à partir du CDN de Google dans ma source HTML. Le lien ci-dessus donne l’impression que Visual Studio recherche un fichier réellement vide comme indicateur qu’il doit importer des fichiers de définition. J'ai donc ajouté manuellement des fichiers à mon répertoire Scripts et reconstruit, mais rien n'a changé.

La page liée ci-dessus indique également comment inclure vos fichiers de bibliothèque à partir de npm ou de bower, ou utiliser un fichier tsconfig.json, mais avant de suivre ces chemins (qui ne font pas partie de mon flux de travail normal), j'espère que quelqu'un pourra me le dire, existe-t-il un moyen privilégié d'introduire des définitions TypeScript dans Visual Studio 2017? Merci d'avance.

UPDATE: (Voir aussi la mise à jour 2 ci-dessous) J'ai réussi à faire fonctionner les choses. Ce n'était pas vraiment intuitif, alors je partage mes pas ici dans l'espoir a) que cela aide quelqu'un et b) que quelqu'un puisse me dire si je ne fais que cela dans le mauvais sens.

  1. Supprimez tous les fichiers de code et de définition TypeScript du projet.
  2. Ouvrez packages.json et supprimez également toutes les références au fichier de définition.
  3. Nettoyer et construire. Pas d'erreurs ou d'avertissements.
  4. Via NuGet, installez le fichier de définition dont vous avez besoin (par exemple, pour jQuery, le package souhaité est "jquery.TypeScript.DefinitelyTyped").
  5. Cela installera le fichier de définition dans Scripts\typings\jquery.
  6. Faites la même chose pour les autres bibliothèques que vous référencez.
  7. Ajoutez un nouveau fichier TypeScript de test et ajoutez une ligne qui tente d'utiliser une bibliothèque, par exemple, var foo = $(document);.
  8. IntelliSense fonctionne! Projet construit! On dirait que nous sommes de retour dans les affaires!
  9. Pas si vite. Quelques secondes plus tard, nous obtenons à nouveau des erreurs d'identificateur en double. Il semble que Visual Studio ait lui-même récupéré les fichiers de définition (peut-être activé par l'inclusion des fichiers de définition via NuGet) et nous avons à nouveau des conflits.
  10. Ajoutez le fichier tsconfig.js avec la directive suivante, ce qui empêche Visual Studio de télécharger ses propres copies des fichiers de définition: { "compilerOptions": { "types": [] } }
  11. Les erreurs ont disparu.
  12. Pas si vite! Quelques secondes plus tard, des centaines de nouvelles erreurs apparaissent, faisant référence à des fichiers TypeScript que j'ai complètement supprimés de mon projet. En ouvrant l’un des fichiers référencés dans la fenêtre d’erreur, il semble que des copies aient été faites dans <Project>\obj\Debug\... (chemin était plus long mais j’ai oublié de l’enregistrer)
  13. Aucune quantité de nettoyage de la solution ne supprime ces fichiers.
  14. Supprimez l'intégralité du répertoire obj manuellement.
  15. Ajoutez tous mes fichiers TypeScript d'origine dans le projet.
  16. Reconstruire. Succès!

UPDATE 2: J'ai découvert quelques inconvénients avec l'approche ci-dessus. J'ai aussi une meilleure solution.

L'utilisation de tsconfig.json présente un inconvénient majeur. L'option de recompiler lors de l'enregistrement ne fonctionne pas dans Visual Studio. Je souhaite que mon site s'exécute en mode débogage, apporte quelques modifications à TypeScript, clique sur Enregistrer, puis voit immédiatement ces modifications reflétées sur le site.

Je pense que l'un des problèmes qui me posaient problème était que mes fichiers TypeScript se trouvaient dans un dossier autre que Scripts, que je réservais pour les fichiers devant être déployés tels quels sur le serveur. Je suppose que Microsoft considère cela comme un cas d'utilisation non standard.

Après avoir tapé ma tête contre le mur pendant trop longtemps, j'ai trouvé une solution simple, bien que délicate. J'ai pris tous les sous-répertoires de ce répertoire:

C:\Users\[me]\AppData\Local\Microsoft\TypeScript\node_modules\@types

et les a déplacés vers un répertoire appelé Supprimé.

Bam. Plus d'inclusion automatique de définitions, plus d'erreurs.

Si vous lisez, Microsoft, veuillez fournir une assistance pour mon scénario, qui est, à réitérer, le suivant:

  • Fichiers TypeScript stockés dans un répertoire autre que Scripts
  • Bibliothèques (telles que jQuery) incluses via une référence à un CDN tiers
  • Fichiers de définition pour les bibliothèques ci-dessus incluses directement via NuGet.

UPDATE 3: J'ai enfin réussi à le faire fonctionner. Voir la réponse ci-dessous pour une solution non-hacky.

typescripttypescript-typingsvisual-studio-2017
22
Brian Rak

Je l'ai obtenu sans piratage. L'astuce consiste à utiliser un fichier tsconfig.json et à désactiver l'inclusion de définition automatique. Dans ma question initiale, j'ai mentionné que j'avais essayé cela et que je ne pouvais pas utiliser la compilation sur sauvegarde. Cependant, c’est parce que j’essayais d’utiliser l’option "watch", alors que j’aurais vraiment dû utiliser l’option "compileOnSave". 

Voici l'ensemble de mes étapes de travail pour transformer mon projet brisé d'origine en un projet qui fonctionne correctement et continuera de fonctionner correctement sur une installation non modifiée de Visual Studio 2017.

Ajoutez un fichier tsconfig.json à votre projet à la racine.

Configurez votre fichier avec au moins:

{ "compilerOptions": { "types": [] } }

mais peut-être avec d'autres options que vous le souhaitez. Mon fichier ressemble à ceci: 

{
  "compileOnSave": true,
  "compilerOptions": {
    "types": [],
    "sourceMap": true,
    "target": "es5",
    "noEmitOnError": true
  }
}

Vous pouvez en apprendre davantage sur les autres options du compilateur ici: https://www.typescriptlang.org/docs/handbook/compiler-options.html

C'est la partie "types":[] qui empêche l'inclusion automatique de définitions.

Cela signifie que vous devez apporter les définitions de toutes les bibliothèques que vous utilisez. Heureusement, c'est très facile avec NuGet. Par exemple, pour jQuery, recherchez simplement jquery.TypeScript.DefinitelyTyped et installez la version appropriée. Cela créera des dossiers sous Scripts/typings. 

Si vous aviez des erreurs auparavant, vous devrez peut-être effacer un peu cruellement. Nettoyez votre projet, supprimez le répertoire obj situé en haut de la structure de répertoires de votre projet et il devrait maintenant être construit correctement. J'ai eu quelques erreurs errantes qui ont disparu lorsque j'ai tapé quelque chose dans le fichier, puis enregistré à nouveau. Un redémarrage de Visual Studio peut également être utile. 

Bonne chance!

UPDATE: J'ai découvert que lorsque je publiais sur Azure, j'avais de nouveau des erreurs. Cependant, lorsque j'ai ajouté les directives suggérées par Perfa ci-dessous à mon fichier tsconfig.json, supprimé mes répertoires bin et obj et redémarré Visual Studio, ces erreurs ne sont plus apparues. J'ai maintenant construit et reconstruit et publié à plusieurs reprises sur Azure et ils semblent bel et bien partis.

Pour plus de clarté, mon fichier tsconfig.json complet ressemble maintenant à ceci:

{
  "compileOnSave": true,
  "compilerOptions": {
    "types": [],
    "sourceMap": true,
    "target": "es5",
    "noEmitOnError": true
  },
  "exclude": [
    "node_modules",
    "obj",
    "bin"
  ]
}
16
Brian Rak

après l'installation de VS 2017, j'ai eu cette erreur. Pour m'en débarrasser, j'ai mis à jour ma section d'exclusion tsconfig.json avec obj et bin.

"exclude": [
    "node_modules",
    "obj",
    "bin"
  ]
6
Perfa

J'ai eu ce problème exact dans une ancienne application que j'ai mise à jour vers VS 2017 et je l'ai corrigé en suivant la réponse de harley.333 - Modification de l'installation pour inclure le Kit de développement logiciel (SDK) TypeScript 2.0.

Je n'ai pas le représentant à commenter, mais pour le trouver, vous devez retourner l'onglet "Composants individuels", puis le dernier groupe, "SDK, bibliothèques et frameworks".

Installez TypeScript SDK Screenshot

1
Will Swope