TypeScript en tsconfig.json

Dit artikel legt TypeScript en tsconfig.json uit.

We beginnen met de basisrol van TypeScript en leggen met concrete voorbeelden uit hoe tsconfig.json binnen een project functioneert.

YouTube Video

TypeScript en tsconfig.json

TypeScript is 'JavaScript met typen.'. Om TypeScript effectief te gebruiken in echte projecten, is het essentieel om tsconfig.json goed te begrijpen en bewust te configureren.

Waarom hebben we TypeScript nodig?

De belangrijkste reden om TypeScript te gebruiken is 'de mogelijkheid om fouten te vinden vóór uitvoering.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Deze code zou in JavaScript pas bij runtime een fout veroorzaken, maar in TypeScript resulteert dit in een typefout tijdens compilatie.

Deze 'vroege detectie' verbetert de efficiëntie en kwaliteit van de ontwikkeling aanzienlijk.

Hoe wordt TypeScript uitgevoerd?

In principe kan TypeScript niet direct worden uitgevoerd. Je moet het omzetten naar JavaScript met behulp van de tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

• Door deze handeling wordt tsconfig.json gegenereerd, dat het centrale bestand vormt dat het gedrag van het TypeScript-project definieert.

Wat is de rol van tsconfig.json?

tsconfig.json is een configuratiebestand dat bepaalt 'welke bestanden', 'met welke regels', en 'hoe ze geconverteerd worden.'. Hoewel het in het begin complex kan lijken, zijn er maar een paar werkelijk belangrijke instellingen.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Met alleen deze instellingen is moderne en veilige TypeScript-ontwikkeling mogelijk.

target: De uit te voeren JavaScript-versie

Met target wordt het specificatieniveau van de uitvoer-JavaScript bepaald.

1"target": "ES2020"

Hiermee zal TypeScript JavaScript genereren die gelijk staat aan ES2020. Voor oudere omgevingen kies je ES5; voor alleen de nieuwste omgevingen kies je ES2022, enzovoorts.

Bij het specificeren van ESNext

1"target": "ESNext"

• ESNext geeft aan om de nieuwste beschikbare JavaScript-syntax ongewijzigd uit te voeren. TypeScript transpileert de syntax niet, maar laat het aan de runtime-omgeving, zoals Node.js of browsers, over om dit af te handelen.

• ESNext is dus geschikt als je alleen de nieuwste Node.js-versie target of als je Babel of een bundler gebruikt om apart te transpilen. Als de runtime-omgeving de nieuwste syntax niet ondersteunt, kan dit echter tot runtime-fouten leiden, dus voorzichtigheid is geboden.

module: Specificeer het moduleformaat

module geeft het moduleformaat aan.

1"module": "ESNext"

• ESNext is de standaard in de frontend en moderne Node.js-omgevingen.
• Kies "CommonJS" alleen als je CommonJS nodig hebt.

strict: Maximale types veiligheid

strict is een schakelaar om de veiligheid van TypeScript te maximaliseren.

1"strict": true

• Als je dit inschakelt worden onduidelijke typen en potentiële bugs grondig gedetecteerd.

strict-modus en impliciete any

Als je strict inschakelt, behandelt TypeScript variabelen waarvan het type niet kan worden afgeleid als een fout.

1function printValue(value) {
2	console.log(value);
3}

• Deze variabele value heeft geen type-informatie bij de declaratie, dus TypeScript kan het type niet bepalen. Hierdoor wordt any impliciet gebruikt, wat een waarschuwing (fout) zal opleveren in strict-modus.

1function printValue(value: number) {
2	console.log(value);
3}

• Door het type expliciet op deze manier op te geven, begrijpt TypeScript dat 'deze variabele alleen met getallen werkt.'. In TypeScript is het belangrijker dat het type uniek kan worden bepaald dan dat het type weggelaten kan worden.

include/exclude: Bepalen welke bestanden gecompileerd worden

In tsconfig.json kun je aangeven welke bestanden wel en welke niet moeten worden gecompileerd.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Hiermee zullen alleen de bestanden onder src door TypeScript worden beheerd.
• node_modules die in exclude staan, worden uitgesloten van compilatie, zelfs als ze onder een pad vallen dat door include wordt omvat.

outDir: Geef de uitvoermap op

Specificeer outDir om de locatie van je build-uitvoer te beheren.

1"outDir": "dist"

• Hiermee worden alle gecompileerde resultaten in de dist map geplaatst. In de praktijk is het standaard om broncodes te scheiden van build-artifacten.

rootDir: Geef de bronmap op

rootDir geeft op welke map TypeScript als root van de broncode beschouwt.

1"rootDir": "src"

• Met deze instelling behoudt TypeScript de mappenstructuur vanaf src bij het uitgeven van bestanden. Bijvoorbeeld, src/index.ts zal worden uitgesplitst als dist/index.js.

• De structuur van de map gespecificeerd in rootDir wordt gerepliceerd in outDir.

esModuleInterop: Brug tussen CommonJS en ES Modules

Laten we nu kijken naar esModuleInterop.

1"esModuleInterop": true

• Als dit is ingeschakeld, kun je veilig CommonJS-modules gebruiken met de import-syntaxis.

1import fs from "fs";

• Deze instelling is bijna essentieel bij gebruik van Node.js.

noImplicitAny: Verbied impliciete 'any'-types

Het is ook belangrijk om typecontroles in tsconfig.json te versterken.

1"noImplicitAny": true

• Hiermee kun je impliciete any-types verbieden. Zo kun je betrouwbaar herkennen waar je bent vergeten een type op te geven.

Configuratie voor het detecteren van ongebruikte code

Instellingen voor het detecteren van ongebruikte code zijn ook nuttig voor het verbeteren van de onderhoudbaarheid.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Hierdoor worden onnodige variabelen en argumenten direct gemarkeerd met waarschuwingen.

lib: Definieer de ingebouwde API's die beschikbaar zijn

lib is een instelling waarmee je aangeeft welke standaard-API's TypeScript als aanwezig beschouwt.

1"lib": ["ES2020", "DOM"]

• Met deze instelling worden de volgende types beschikbaar:. Met ES2020 zijn moderne features als Promise, Map en Set beschikbaar. Met DOM komen browser-API's zoals document, window en HTMLElement beschikbaar.

In de frontend neem je DOM op; voor alleen Node.js-projecten verwijder je DOM om onnodige globale types te voorkomen.

moduleResolution: Regels voor module-zoekopdracht

moduleResolution bepaalt hoe modules die in import-instructies zijn gespecificeerd worden gevonden.

1"moduleResolution": "Node"

De twee belangrijkste opties zijn als volgt:.

• Als je Node opgeeft, worden de Node.js-module resolutieregels toegepast.
• Classic is de oude, TypeScript-specifieke methode, maar wordt tegenwoordig zelden gebruikt.

In omgevingen met Node.js of een bundler is het veilig om expliciet Node op te geven.

Een minimale, productieklare tsconfig.json

Gebaseerd op wat we tot nu toe hebben behandeld, ziet een minimale, productieklare tsconfig.json er zo uit:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Deze configuratie biedt een veilige basis voor zowel frontend- als Node.js-projecten.

Samenvatting: tsconfig.json is een 'regelboek'

tsconfig.json is niet alleen een configuratiebestand, maar een 'regelboek' dat geldt voor het hele project. Met tsconfig.json worden belangrijke beleidsregels duidelijk vastgelegd zoals:.

• Het niveau van types veiligheid.
• Codeerafspraken voor je team.
• Voorkomen van toekomstige bugs.

Door tsconfig.json te begrijpen, kun je niet alleen TypeScript schrijven, maar ook je projecten inrichten voor veilig TypeScript-gebruik.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video