TypeScript i Visual Studio 2017: Automatisk inkludering av definisjoner forårsaker feil med dupliserte identifikatorer

OPPDATERING: Jeg har funnet en løsning som gjør at ting fungerer tilfredsstillende uten noen juks. Jeg lar mine tidligere forsøk beskrevet nedenfor stå for ettertiden. Se svaret for den fungerende løsningen.

Jeg har nettopp oppgradert et prosjekt til Visual Studio 2017, og jeg får alle slags TypeScript-feil helt plutselig. Mange av dem er Duplicate identifier-feil. Når jeg dobbeltklikker på en av feilene, åpner den en fil kalt index.d.ts, plassert i en katalog som:

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

Basert på det jeg leste på denne siden:

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

...det ser ut til at det som skjer er at Visual Studio prøver å hjelpsomt laste ned definisjonsfiler for typer hvor jeg allerede har manuelt inkludert definisjonsfilene. Automatisk inkludering av definisjonsfiler høres ut som en flott funksjon! Jeg kan bare slette de manuelt inkluderte, ikke sant? Men ingenting jeg gjør ser ut til å fungere. Jeg håper noen kan fortelle meg hvor jeg tar feil.

For bakgrunnen, måten jeg hadde ting til å fungere i Visual Studio 2015 var som følger. Jeg brukte tre biblioteker: jQuery, jQuery UI og QUnit. Jeg lastet ganske enkelt ned .d.ts-filene fra DefinitelyTyped og la dem i Scripts-katalogen i prosjektet mitt, og alt fungerte riktig helt til jeg åpnet prosjektet i VS 2017.

Fra feilmeldingene ser det ut til at Visual Studio 2017 bringer inn sine egne definisjonsfiler, så jeg tenkte jeg bare skulle slette de jeg hadde lagt inn manuelt. Men når jeg gjør det, får jeg nå massevis av Kan ikke finne navnet $-feil, noe som ser ut til å bety at disse definisjonsfilene ikke lenger blir hentet inn av en eller annen grunn.

Deretter tenkte jeg at kanskje problemet var at jeg faktisk ikke hadde JQuery (og andre bibliotek) kildefiler i prosjektet mitt. Jeg refererer bare til dem fra Googles CDN i min HTML-kilde. Lenken ovenfor får det til å høres ut som om Visual Studio ser etter en faktisk løs fil som indikasjon på at det bør hente inn definisjonsfiler. Så jeg la manuelt til filer i min Scripts-katalog og bygde på nytt, men ingenting endret seg.

Den lenkede siden ovenfor snakker også om å inkludere bibliotekfilene dine fra npm eller bower, eller bruke en tsconfig.json-fil, men før jeg går ned de veiene (ikke en del av min vanlige arbeidsflyt), håper jeg at noen kan fortelle meg, finnes det en foretrukket måte å bringe inn TypeScript-definisjoner i Visual Studio 2017? Takk på forhånd.

OPPDATERING: (Se også Oppdatering 2 nedenfor) Jeg klarte å få ting til å fungere. Dette var ikke akkurat intuitivt, så jeg deler mine steg her i håp om at a) det hjelper noen, og b) noen kan fortelle meg om jeg bare gjør dette på feil måte.

  1. Fjern all TypeScript-kode og definisjonsfiler fra prosjektet.
  2. Åpne packages.json og fjern alle referanser til definisjonsfiler der også.
  3. Rens og bygg. Ingen feil eller advarsler.
  4. Via NuGet, installer definisjonsfilen du trenger (for eksempel, for jQuery, er pakken du vil ha "jquery.TypeScript.DefinitelyTyped").
  5. Dette vil installere definisjonsfilen i Scripts\typings\jquery.
  6. Gjør det samme for andre biblioteker du refererer til.
  7. Legg til en ny test TypeScript-fil og legg til en linje som prøver å bruke et bibliotek, for eksempel var foo=$ (document);
  8. IntelliSense fungerer! Prosjektet bygges! Ser ut som vi er i gang igjen!
  9. Ikke så fort. Noen sekunder senere får vi Duplicate identifier-feil igjen. Det ser ut til at Visual Studio plukket opp definisjonsfilene på egen hånd (kanskje aktivert av at jeg inkluderte definisjonsfilene via NuGet), og nå har vi konflikter igjen.
  10. Legg til tsconfig.js-fil med følgende direktiv, som hindrer Visual Studio i å laste ned sine egne kopier av definisjonsfilene: { "compilerOptions": { "types": [] } }
  11. Feil borte.
  12. Ikke så raskt! Sekunder senere dukker hundrevis av nye feil opp, med referanse til TypeScript-filer som jeg har fjernet helt fra prosjektet mitt. Når jeg åpner en av filene som er referert i feilmeldingsvinduet, ser det ut til at kopier ble laget i <Project>\obj\Debug\... (stien var lengre, men jeg glemte å notere den)
  13. Ingen mengde rengjøring av løsningen fjerner disse filene.
  14. Slett hele obj-mappen manuelt.
  15. Legg alle mine opprinnelige TypeScript-filer tilbake i prosjektet.
  16. Gjenoppbygg. Suksess!

OPPDATERING 2: Jeg oppdaget noen mangler med tilnærmingen ovenfor. Jeg har også en bedre løsning.

Å bruke tsconfig.json har en stor ulempe. Alternativet for å kompilere på nytt ved lagring fungerer ikke i Visual Studio. Jeg vil at nettstedet mitt skal kjøre i debug-modus, gjøre noen endringer i TypeScript, trykke lagre, og deretter umiddelbart se disse endringene reflektert på nettstedet.

Jeg tror en av tingene som forårsaket problemer for meg var at jeg har mine TypeScript-filer i en annen mappe enn Scripts, som jeg reserverer for filer som skal distribueres til serveren som de er. Jeg antar at Microsoft betrakter dette som et ikke-standard brukstilfelle.

Etter å ha slått hodet mitt mot veggen altfor lenge over dette, har jeg funnet en enkel, om enn litt kronglete, løsning. Jeg tok alle undermappene i denne katalogen:

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

og flyttet dem til en mappe kalt Slettet.

Bam. Ikke flere automatiske inkluderinger av definisjoner, ikke flere feil.

Microsoft, hvis dere leser dette, vennligst gi støtte for scenariet mitt, som, for å gjenta, er:

  • TypeScript-filer lagret i en annen katalog enn Scripts
  • Biblioteker (som jQuery) inkludert via referanse til tredjeparts CDN
  • Definisjonsfiler for ovennevnte biblioteker inkludert direkte via NuGet.

OPPDATERING 3: Jeg fikk det endelig til å fungere. Se svaret nedenfor for en løsning uten juks.

Svar #1

Jeg fikk det til å fungere uten juks. Trikset er å bruke en tsconfig.json-fil og deaktivere automatisk inkludering av definisjoner. I mitt opprinnelige spørsmål nevnte jeg at jeg hadde prøvd dette og oppdaget at jeg ikke kunne bruke kompiler-på-lagring. Det var imidlertid fordi jeg prøvde å bruke "watch"-alternativet, når jeg egentlig burde ha brukt "compileOnSave"-alternativet.

Her er mitt komplette sett med arbeidssteg for å forvandle mitt opprinnelige, ødelagte prosjekt til ett som fungerer riktig og som vil fortsette å fungere riktig på en uendret installasjon av Visual Studio 2017.

Legg til en tsconfig.json-fil i prosjektet ditt i roten.

Konfigurer filen din med minst:

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

men kanskje med andre alternativer som du liker. Filen min ser slik ut:

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

Du kan lære om andre kompilatoralternativer her: https://www.typescriptlang.org/docs/handbook/compiler-options.html

Det er delen "types":[] som forhindrer den automatiske inkluderingen av definisjoner.

Det betyr at det er opp til deg å legge til definisjoner for hvilke som helst biblioteker du bruker. Heldigvis er det superenkelt via NuGet. For eksempel, for jQuery, søk bare etter jquery.TypeScript.DefinitelyTyped og installer riktig versjon. Dette vil opprette mapper under Scripts/typings.

Hvis du tidligere hadde feil, kan det hende du må rydde opp i noe skrot. Rengjør prosjektet ditt, slett obj-katalogen øverst i prosjektets katalogstruktur, og det bør nå bygges korrekt. Jeg hadde et par tilfeldige feil som forsvant da jeg skrev noe i filen og deretter lagret igjen. Det kan også være lurt å starte Visual Studio på nytt.

Lykke til!

OPPDATERING: Jeg oppdaget at når jeg publiserte til Azure, fikk jeg feil igjen. Men når jeg la til direktivene som Perfa foreslo nedenfor i min tsconfig.json-fil, slettet mine bin- og obj-mapper og startet Visual Studio på nytt, dukket ikke de feilene opp lenger heller. Jeg har nå bygget og bygget på nytt og publisert til Azure flere ganger, og de ser ut til å være godt og virkelig borte.

For klarhetens skyld ser hele min tsconfig.json-fil nå slik ut:

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

Svar #2

etter å ha installert VS 2017 fikk jeg denne feilen. For å bli kvitt den oppdaterte jeg exclude-delen i tsconfig.json med obj og bin.

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

Relaterte artikler