TypeScript-compilatie uitgelegd Hoe u code compileert en uitvoert

TypeScript is een statisch getypeerde superset van JavaScript die compileert naar plain JavaScript. Om TypeScript effectief te gebruiken, is het cruciaal om het compilatieproces te begrijpen. Deze gids leidt u door de basisprincipes van het compileren en uitvoeren van TypeScript-code, van installatie tot uitvoering.

TypeScript-compilatie begrijpen

TypeScript-code wordt niet rechtstreeks uitgevoerd door browsers of Node.js. In plaats daarvan moet het worden gecompileerd naar JavaScript. De TypeScript-compiler, `tsc`, voert deze taak uit. Het proces omvat het converteren van TypeScript-bestanden (`.ts`) naar JavaScript-bestanden (`.js`) die in elke JavaScript-omgeving kunnen worden uitgevoerd.

Uw TypeScript-omgeving instellen

Voordat u TypeScript-code kunt compileren, moet u ervoor zorgen dat u Node.js en npm hebt geïnstalleerd. U kunt TypeScript wereldwijd installeren met behulp van npm:

npm install -g typescript

Met deze opdracht wordt de TypeScript-compiler (`tsc`) wereldwijd geïnstalleerd, zodat deze overal op uw systeem toegankelijk is.

TypeScript-code compileren

Om een ​​TypeScript-bestand te compileren, navigeert u naar de projectmap in de terminal en gebruikt u de opdracht `tsc` gevolgd door de bestandsnaam:

tsc filename.ts

Vervang `filename.ts` door de naam van uw TypeScript-bestand. Deze opdracht compileert de TypeScript-code naar een JavaScript-bestand met dezelfde naam, maar met een `.js`-extensie.

Een TypeScript-configuratiebestand gebruiken

Een `tsconfig.json`-bestand wordt gebruikt om de TypeScript-compileropties en projectinstellingen te configureren. U kunt dit bestand genereren met:

npx tsc --init

Hier is een voorbeeld van een eenvoudig `tsconfig.json`-bestand:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Deze configuratie specificeert dat TypeScript code moet compileren naar ECMAScript 6 (`es6`), CommonJS-modules moet gebruiken, strikte typecontrole moet inschakelen, gecompileerde bestanden naar de map `dist` moet uitvoeren en broncodekaarten moet genereren voor foutopsporing.

Alle bestanden in een project compileren

Met een `tsconfig.json`-bestand kunt u alle TypeScript-bestanden in uw project compileren door het volgende uit te voeren:

tsc

Met deze opdracht wordt het bestand `tsconfig.json` gelezen en worden alle TypeScript-bestanden die in de configuratie zijn opgegeven, gecompileerd.

Gecompileerde JavaScript-code uitvoeren

Zodra TypeScript-code is gecompileerd in JavaScript, kunt u deze uitvoeren met Node.js of opnemen in een webproject. Om een ​​JavaScript-bestand uit te voeren met Node.js, gebruikt u:

node dist/filename.js

Vervang `filename.js` door de naam van uw gecompileerde JavaScript-bestand in de map `dist`.

Veelvoorkomende compilatiefouten

Tijdens het compileren kunt u fouten tegenkomen. Hier zijn enkele veelvoorkomende problemen en hoe u ze kunt oplossen:

• Syntaxisfouten: Controleer uw TypeScript-code op syntaxisproblemen. De compiler geeft foutmeldingen die aangeven waar de problemen zitten.
• Typefouten: Zorg ervoor dat uw code voldoet aan het typesysteem van TypeScript. Controleer de typeannotaties en zorg ervoor dat ze correct zijn gedefinieerd.
• Configuratieproblemen: Controleer of uw `tsconfig.json`-bestand correct is geconfigureerd en zich in de hoofdmap van uw project bevindt.

Conclusie

Het compileren van TypeScript-code is een fundamentele stap in het ontwikkelingsproces. Door te begrijpen hoe u uw omgeving instelt, de compiler configureert en veelvoorkomende fouten aanpakt, kunt u TypeScript-code efficiënt converteren naar JavaScript en deze in verschillende omgevingen uitvoeren. Deze kennis helpt u het maximale uit de functies van TypeScript te halen en uw ontwikkelingsworkflow te verbeteren.