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

   För det äldre projektet (.njsproj) måste du installera utvecklingsarbetsbelastningen Node.js och köra körmiljön 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-filerna (*.ts) finns.
   • 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.

   Notera

   När du konfigurerar verktyg från tredje part använder Node.js projekt inte de sökvägar som konfigureras under Tools>Options>Projects and solutions>Web Package Management>External Web Tools. De här inställningarna används för andra projekttyper.

4. Välj Build > Build Solution.

   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).

   För felsökningkrävs källmappningsfiler.

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