Transpilera TypeScript-kod med npm

Lägg till TypeScript-stöd med npm

TypeScript npm-paketet lägger till TypeScript-stöd. När npm-paketet för TypeScript 2.1 eller senare installeras i projektet läses motsvarande version av TypeScript-språktjänsten in i redigeraren.

1. Kontrollera om du behöver installera någon utvecklingsmiljö för Visual Studio eller Node.js-körmiljö.

   För projekt som skapats med hjälp av JavaScript Project System (JSPS) eller .esprojbehövs inga ytterligare arbetsbelastningar. Du behöver bara installera npm (), som ingår i Node.js.

2. Om projektet inte redan innehåller det installerar du TypeScript npm-paketet.

   Från Prieskumník riešení (höger fönster) öppnar du package.json i projektroten. De paket som anges motsvarar paket under noden npm i Prieskumník riešení. Mer information finns i Hantera npm-paket.

   Kontrollera alternativet npm i fönstret Output för att se förloppet för paketinstallationen. Det installerade paketet visas under noden npm i Prieskumník riešení.

3. Om projektet inte redan innehåller det lägger du till en tsconfig.json fil i projektroten. Om du vill lägga till filen högerklickar du på projektnoden och väljer Lägg till nytt objekt. Välj TypeScript JSON-konfigurationsfiloch klicka sedan på Lägg till.

   Om du inte ser alla objektmallar väljer du Visa alla mallaroch väljer sedan objektmallen.

   Visual Studio lägger till filen tsconfig.json i projektroten. Du kan använda den här filen för att konfigurera alternativ för tsc, TypeScript-kompilatorn, som överför TypeScript till JavaScript.

4. Öppna tsconfig.json och uppdatera för att ange de kompilatoralternativ som du vill ha.

   Ett exempel på en enkel tsconfig.json fil följer.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   I det här exemplet:

   • inkludera talar om för kompilatorn var TypeScript-filer (*.ts) ska hittas.
   • outDir-alternativet anger utdatamappen för de vanliga JavaScript-filer som överförs av tsc, TypeScript-kompilatorn.
   • sourceMap-alternativet anger om kompilatorn genererar sourceMap- filer.

   Den tidigare konfigurationen ger bara en grundläggande introduktion till att konfigurera TypeScript. Information om andra alternativ finns i tsconfig.json.

Skapa programmet

1. Lägg till TypeScript-filer (.ts) eller TypeScript JSX (.tsx) i projektet och lägg sedan till TypeScript-kod. Ett enkelt exempel på TypeScript följer:

   let message: string = 'Hello World';
   console.log(message);
   

2. I package.json lägger du till stöd för Visual Studio skapa och rensa kommandon med hjälp av följande skript.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Om du vill skapa med hjälp av ett verktyg från tredje part, till exempel webpack, kan du lägga till ett kommandoradsversionsskript i din package.json-fil:

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

3. Om du behöver konfigurera bygg- och distributionsalternativ som app-URL eller körningskommandon högerklickar du på projektnoden i Prieskumník riešení och väljer Egenskaper.

   Not

   När du konfigurerar verktyg från tredje part använder projekt med JavaScript Project System (JSPS) eller .esproj inte de sökvägar som konfigureras under VerktygAlternativProjekt och lösningarWebbpakethanteringExterna webbverktyg. De här inställningarna används för andra projekttyper.

4. Välj Bygg Bygg lösning.

   Appen skapas automatiskt när du kör den. Följande kan dock inträffa under byggprocessen:

   Om du har genererat källkartor öppnar du mappen som anges i alternativet outDir och du hittar den genererade *.js fil(er) tillsammans med den genererade *js.map-filen(er).

   Källmappningsfiler krävs för felsökning.

Kör programmet

Automatisera bygguppgifter

Du kan använda Task Runner Explorer i Visual Studio för att automatisera uppgifter för verktyg från tredje part som npm och webpack.

Relaterat innehåll

Egenskaper, React, Angular, Vue