Kompilera TypeScript-kod (Node.js)

Använd TypeScript npm-paketet för att lägga till TypeScript-stöd i projekt baserat på JavaScript Project System (JSPS)eller .esproj. Från och med Visual Studio 2019 rekommenderar vi att du använder npm-paketet i stället för TypeScript SDK. TypeScript npm-paketet ger större portabilitet mellan olika plattformar och miljöer.

Viktig

För ASP.NET Core-projekt använder du NuGet-paketet i stället för npm för att lägga till TypeScript-stöd.

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ågot utvecklingsverktyg för Visual Studio eller Node.js runtime-miljö.

   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 (https://www.npmjs.com/), som ingår i Node.js.

   För den äldre projekttypen (.njsproj) måste du installera utvecklingsarbetsbelastningen Node.js och runtime Node.js.

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

   Öppna package.json i projektroten från Solution Explorer (till höger). De paket som visas motsvarar paket under noden npm i Solution Explorer. Mer information finns i Hantera npm-paket.

   För ett Node.js projekt kan du installera TypeScript npm-paketet med hjälp av kommandoraden eller IDE. Om du vill installera med IDE högerklickar du på noden npm i Solution Explorer, väljer Installera nytt npm-paket, söker efter TypeScript-och installerar paketet.

   Kontrollera alternativet npm i fönstret Output för att se förloppet för paketinstallationen. Det installerade paketet visas under noden npm i Solution Explorer.

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 tsconfig.json-filen i projektroten. Du kan använda den här filen för att konfigurera alternativ för TypeScript-kompilatorn.

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 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.jsonlägger du till stöd för Visual Studio build- och clean-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 alternativ som startsidan, sökvägen till Node.js runtime, programporten eller körningsargumenten högerklickar du på projektnoden i Solution Explorer och väljer Egenskaper.

   Not

   När du konfigurerar tredjepartsverktyg använder Node.js-projekt inte de sökvägar som konfigureras under Tools>Options>Verktyg och lösningar>Web Package Management>External Web Tools. 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

Anvisningar om hur du kör appen när du har kompilerats finns i Skapa en Node.js- och Express-app.

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.

• NPM Task Runner – Lägger till stöd för npm-skript som definierats i package.json. Stödjer garn.
• Webpack Task Runner – Lägger till stöd för webpack.

Relaterat innehåll

Egenskaper, React, Angular, Vue