TypeScript-code compileren (Node.js)

Gebruik het TypeScript NPM-pakket om TypeScript-ondersteuning toe te voegen aan projecten op basis van het JavaScript Project System (JSPS)of .esproj. Vanaf Visual Studio 2019 is het raadzaam om het npm-pakket te gebruiken in plaats van de TypeScript SDK. Het TypeScript npm-pakket biedt meer overdraagbaarheid op verschillende platforms en omgevingen.

Belangrijk

Gebruik voor ASP.NET Core-projecten het NuGet-pakket in plaats van npm om TypeScript-ondersteuning toe te voegen.

TypeScript-ondersteuning toevoegen met npm

Het TypeScript NPM-pakket voegt TypeScript-ondersteuning toe. Wanneer het npm-pakket voor TypeScript 2.1 of hoger is geïnstalleerd in uw project, wordt de bijbehorende versie van de TypeScript-taalservice geladen in de editor.

1. Controleer of u een ontwikkelworkload moet installeren voor Visual Studio of de Node.js runtime.

   Voor projecten die zijn gemaakt met behulp van het JavaScript Project System (JSPS) of .esproj, zijn er geen extra workloads nodig. U hoeft alleen npm (https://www.npmjs.com/) te installeren, die is opgenomen in Node.js.

   Voor het oudere projecttype (.njsproj) moet u de Node.js ontwikkelworkload en de Node.js runtime installeren.

2. Als uw project dit nog niet bevat, installeert u het TypeScript npm-pakket.

   Open in Solution Explorer (rechterdeelvenster) de package.json in de hoofdmap van het project. De vermelde pakketten komen overeen met pakketten onder het npm-knooppunt in Solution Explorer. Zie Npm-pakketten beherenvoor meer informatie.

   Voor een Node.js-project kunt u het TypeScript npm-pakket installeren met behulp van de opdrachtregel of de IDE. Als u wilt installeren met behulp van de IDE, klikt u met de rechtermuisknop op het npm-knooppunt in Solution Explorer, kiest u Nieuw npm-pakket installeren, zoekt u naar TypeScript-en installeert u het pakket.

   Controleer de optie npm- in het venster Uitvoer om de voortgang van de pakketinstallatie te bekijken. Het geïnstalleerde pakket wordt weergegeven onder het knooppunt npm in Solution Explorer.

3. Als uw project dit nog niet bevat, voegt u een tsconfig.json-bestand toe aan de hoofdmap van uw project. Als u het bestand wilt toevoegen, klikt u met de rechtermuisknop op het projectknooppunt en kiest u Toevoegen > Nieuw item. Kies het TypeScript JSON-configuratiebestanden klik vervolgens op toevoegen.

   Als u niet alle itemsjablonen ziet, kiest u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.

   Visual Studio voegt het tsconfig.json-bestand toe aan de hoofdmap van het project. U kunt dit bestand gebruiken om opties te configureren voor de TypeScript-compiler.

4. Open tsconfig.json en werk deze bij om de gewenste compileropties in te stellen.

   Een voorbeeld van een eenvoudig tsconfig.json bestand volgt.

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

   In dit voorbeeld:

   • de compiler vertelt waar typeScript-bestanden (*.ts) moeten worden gevonden.
   • outDir optie geeft de uitvoermap op voor de gewone JavaScript-bestanden die zijn getranspileerd door de TypeScript-compiler.
   • optie sourceMap geeft aan of de compiler sourceMap--bestanden genereert.

   De vorige configuratie biedt slechts een eenvoudige inleiding tot het configureren van TypeScript. Zie tsconfig.jsonvoor meer informatie over andere opties.

De toepassing bouwen

1. Voeg TypeScript- (.ts) of TypeScript JSX-bestanden (.tsx) toe aan uw project en voeg vervolgens TypeScript-code toe. Een eenvoudig voorbeeld van TypeScript volgt:

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

2. Voeg in package.jsonondersteuning toe voor build- en clean-opdrachten van Visual Studio met behulp van de volgende scripts.

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

   Als u wilt bouwen met behulp van een hulpprogramma van derden, zoals Webpack, kunt u een opdrachtregel-buildscript toevoegen aan uw package.json-bestand:

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

3. Als u opties wilt configureren, zoals de opstartpagina, het pad naar de Node.js runtime-, toepassingspoort- of runtime-argumenten, klikt u met de rechtermuisknop op het projectknooppunt in Solution Explorer en kiest u Eigenschappen.

   Notitie

   Bij het configureren van hulpprogramma's van derden gebruiken Node.js projecten niet de paden die zijn geconfigureerd onder Hulpprogramma's>Opties>Projecten en oplossingen>webpakketbeheer>externe webhulpprogramma's. Deze instellingen worden gebruikt voor andere projecttypen.

4. Kies Build > Build Solution.

   De app wordt automatisch gebouwd wanneer u deze uitvoert. Het volgende kan echter optreden tijdens het buildproces:

   Als u brontoewijzingen hebt gegenereerd, opent u de map die is opgegeven in de outDir- optie en vindt u de gegenereerde *.js bestand(en) samen met de gegenereerde *js.map-bestanden.

   Bronkaartbestanden zijn vereist voor foutopsporing.

De toepassing uitvoeren

Zie Een Node.js- en Express-app makenvoor instructies voor het uitvoeren van de app nadat u deze hebt gecompileerd.

Buildtaken automatiseren

U kunt Task Runner Explorer in Visual Studio gebruiken om taken te automatiseren voor hulpprogramma's van derden, zoals npm en Webpack.

• NPM Task Runner - Voegt ondersteuning toe voor npm-scripts die zijn gedefinieerd in package.json. Ondersteunt yarn.
• Webpack Task Runner - Voegt ondersteuning toe voor Webpack.

Verwante inhoud

Eigenschappen, React, Angular, Vue