M

MLOG

Nederlands

Beheers TypeScript-configuratie met deze diepgaande tsconfig.json gids. Leer essentiële compiler-opties, projectopzet en geavanceerde configuraties voor efficiënte ontwikkeling.

TypeScript Configuratie: Een Uitgebreide Gids voor tsconfig.json

TypeScript, een superset van JavaScript, brengt statische typering naar de dynamische wereld van webontwikkeling. Een goed geconfigureerd tsconfig.json-bestand is cruciaal om de volledige kracht van TypeScript te benutten. Deze gids biedt een uitgebreid overzicht van tsconfig.json, waarin essentiële compiler-opties, projectopzet en geavanceerde configuraties worden behandeld.

Wat is tsconfig.json?

Het tsconfig.json-bestand is een configuratiebestand dat de compiler-opties voor een TypeScript-project specificeert. Het vertelt de TypeScript-compiler hoe TypeScript-code naar JavaScript moet worden getranspileerd. Dit bestand is essentieel voor het definiëren van de projectstructuur, het instellen van compilatieregels en het waarborgen van consistentie binnen het ontwikkelingsteam, ongeacht of dat team in één kantoor is gevestigd of verspreid is over meerdere continenten.

Een tsconfig.json-bestand aanmaken

Om een tsconfig.json-bestand aan te maken, navigeer je naar de hoofdmap van je project in de terminal en voer je het volgende commando uit:

tsc --init

Dit commando genereert een basis tsconfig.json-bestand met veelgebruikte compiler-opties. Je kunt het bestand vervolgens aanpassen aan de specifieke eisen van je project. Een typisch tsconfig.json-bestand bevat opties zoals compilerOptions, include en exclude.

Essentiële Compiler-opties

De sectie compilerOptions is het hart van het tsconfig.json-bestand. Het bevat een breed scala aan opties die het gedrag van de TypeScript-compiler bepalen. Hier zijn enkele van de belangrijkste compiler-opties:

target

De target-optie specificeert de ECMAScript-doelversie voor de gegenereerde JavaScript-code. Veelvoorkomende waarden zijn ES5, ES6 (ES2015), ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Het kiezen van de juiste doelversie is cruciaal om compatibiliteit met de beoogde uitvoeringsomgeving, zoals browsers of Node.js-versies, te garanderen.

Voorbeeld:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

module

De module-optie specificeert de stijl voor het genereren van modulecode. Veelvoorkomende waarden zijn CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 en ESNext. De keuze van het modulesysteem hangt af van de doelomgeving en de gebruikte module-bundler (bijv. Webpack, Rollup, Parcel). Voor Node.js wordt vaak CommonJS gebruikt, terwijl voor moderne webapplicaties ES6 of ESNext met een module-bundler de voorkeur heeft. Het gebruik van ESNext stelt ontwikkelaars in staat om de meest recente functies en optimalisaties te benutten, terwijl ze vertrouwen op de bundler om het uiteindelijke moduleformaat af te handelen.

Voorbeeld:

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

lib

De lib-optie specificeert een lijst met bibliotheekbestanden die in de compilatie moeten worden opgenomen. Deze bibliotheekbestanden bieden typedefinities voor ingebouwde JavaScript-API's en browser-API's. Veelvoorkomende waarden zijn ES5, ES6, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext, DOM, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Generator, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.Intl, ES2017.SharedMemory, ES2017.String, ES2017.TypedArrays, ES2018.Intl, ES2018.Promise, ES2018.RegExp, ES2019.Array, ES2019.Object, ES2019.String, ES2019.Symbol, ES2020.BigInt, ES2020.Promise, ES2020.String, ES2020.Symbol.WellKnown, ES2021.Promise, ES2021.String, ES2021.WeakRef, ES2022.Error, ES2022.Object, ES2022.String, en nog veel meer. Het selecteren van de juiste bibliotheken zorgt ervoor dat de TypeScript-compiler de benodigde type-informatie voor de doelomgeving heeft. Het gebruik van de DOM-bibliotheek stelt het project in staat om code te compileren die browserspecifieke API's gebruikt zonder typefouten.

Voorbeeld:

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

allowJs

De allowJs-optie staat de TypeScript-compiler toe om JavaScript-bestanden samen met TypeScript-bestanden te compileren. Dit is nuttig voor het stapsgewijs migreren van bestaande JavaScript-projecten naar TypeScript. Door dit op true in te stellen, kan de compiler .js-bestanden verwerken, wat een geleidelijke adoptie van TypeScript binnen een project mogelijk maakt.

Voorbeeld:

{
  "compilerOptions": {
    "allowJs": true
  }
}

jsx

De jsx-optie specificeert hoe JSX-syntaxis moet worden behandeld. Veelvoorkomende waarden zijn preserve, react, react-native en react-jsx. preserve behoudt de JSX-syntaxis in de uitvoer, terwijl react JSX omzet in React.createElement-aanroepen. react-jsx gebruikt de nieuwe JSX-transformatie die in React 17 is geïntroduceerd, waarvoor het importeren van React niet nodig is. Het kiezen van de juiste JSX-optie is cruciaal voor projecten die React of andere op JSX gebaseerde bibliotheken gebruiken.

Voorbeeld:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

declaration

De declaration-optie genereert corresponderende .d.ts-declaratiebestanden voor elk TypeScript-bestand. Declaratiebestanden bevatten type-informatie en worden door andere TypeScript-projecten gebruikt om de gecompileerde code te consumeren. Het genereren van declaratiebestanden is essentieel voor het maken van herbruikbare bibliotheken en modules. Deze bestanden stellen andere TypeScript-projecten in staat om de typen en interfaces die door de bibliotheek worden blootgesteld te begrijpen, zonder de originele broncode te hoeven compileren.

Voorbeeld:

{
  "compilerOptions": {
    "declaration": true
  }
}

sourceMap

De sourceMap-optie genereert source map-bestanden, die de gegenereerde JavaScript-code terugkoppelen naar de originele TypeScript-code. Source maps zijn essentieel voor het debuggen van TypeScript-code in browsers en andere omgevingen. Wanneer er een fout optreedt in de JavaScript-code, stelt de source map de ontwikkelaar in staat de corresponderende TypeScript-code in de debugger te zien, wat het gemakkelijker maakt om het probleem te identificeren en op te lossen.

Voorbeeld:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

De outDir-optie specificeert de uitvoermap voor de gegenereerde JavaScript-bestanden. Deze optie helpt bij het organiseren van de build-uitvoer van het project door de broncode te scheiden van de gecompileerde code. Het gebruik van een outDir maakt het eenvoudiger om het buildproces te beheren en de applicatie te implementeren.

Voorbeeld:

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

rootDir

De rootDir-optie specificeert de hoofdmap van het TypeScript-project. De compiler gebruikt deze map als basis voor het oplossen van modulenamen. Deze optie is met name belangrijk voor projecten met een complexe directorystructuur. Het correct instellen van de rootDir zorgt ervoor dat de compiler alle benodigde modules en afhankelijkheden kan vinden.

Voorbeeld:

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

strict

De strict-optie schakelt alle strikte type-checking opties in. Dit wordt sterk aanbevolen voor nieuwe TypeScript-projecten, omdat het helpt om potentiële fouten vroeg in het ontwikkelingsproces op te sporen. Het inschakelen van de strikte modus dwingt striktere typecontroleregels af, wat leidt tot robuustere en beter onderhoudbare code. Het is een 'best practice' om de strikte modus in alle nieuwe TypeScript-projecten in te schakelen.

Voorbeeld:

{
  "compilerOptions": {
    "strict": true
  }
}

esModuleInterop

De esModuleInterop-optie maakt interoperabiliteit tussen CommonJS- en ES-modules mogelijk. Dit is belangrijk voor projecten die beide soorten modules gebruiken. Wanneer esModuleInterop is ingeschakeld, zal TypeScript automatisch de verschillen tussen CommonJS- en ES-modules afhandelen, waardoor het eenvoudiger wordt om modules tussen de twee systemen te importeren en exporteren. Deze optie is met name handig bij het werken met bibliotheken van derden die mogelijk verschillende modulesystemen gebruiken.

Voorbeeld:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

moduleResolution

De moduleResolution-optie specificeert hoe TypeScript module-imports oplost. Veelvoorkomende waarden zijn Node en Classic. De Node-strategie voor module-resolutie is de standaard en is gebaseerd op het module-resolutiealgoritme van Node.js. De Classic-strategie is ouder en wordt minder vaak gebruikt. Het gebruik van de Node-strategie zorgt ervoor dat TypeScript module-imports correct kan oplossen in een Node.js-omgeving.

Voorbeeld:

{
  "compilerOptions": {
    "moduleResolution": "Node"
  }
}

baseUrl en paths

De opties baseUrl en paths worden gebruikt om module-resolutie voor niet-relatieve module-imports te configureren. De baseUrl-optie specificeert de basisdirectory voor het oplossen van niet-relatieve modulenamen. De paths-optie stelt je in staat om modulenamen te mappen naar specifieke locaties op het bestandssysteem. Deze opties zijn met name handig voor projecten met een complexe directorystructuur en voor het vereenvoudigen van module-imports. Het gebruik van baseUrl en paths kan de code leesbaarder en beter onderhoudbaar maken.

Voorbeeld:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

Include- en Exclude-opties

De opties include en exclude specificeren welke bestanden moeten worden opgenomen in de compilatie en welke moeten worden uitgesloten. Deze opties gebruiken glob-patronen om bestandsnamen te matchen. Het gebruik van include en exclude stelt je in staat om te bepalen welke bestanden door de TypeScript-compiler worden verwerkt, wat de buildprestaties verbetert en fouten vermindert. Het is een 'best practice' om expliciet de bestanden te specificeren die in de compilatie moeten worden opgenomen.

Voorbeeld:

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Extends-optie

De extends-optie stelt je in staat om compiler-opties over te erven van een ander tsconfig.json-bestand. Dit is handig voor het delen van gemeenschappelijke configuratie-instellingen tussen meerdere projecten of voor het creëren van basisconfiguraties. Het gebruik van de extends-optie bevordert hergebruik van code en vermindert duplicatie. Het is een 'best practice' om basisconfiguraties te maken en deze in individuele projecten uit te breiden.

Voorbeeld:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

Geavanceerde Configuraties

Naast de essentiële compiler-opties ondersteunt tsconfig.json geavanceerde configuraties voor gespecialiseerde scenario's.

Incrementele Compilatie

Voor grote projecten kan incrementele compilatie de bouwtijden aanzienlijk verbeteren. TypeScript kan de resultaten van eerdere compilaties cachen en alleen bestanden opnieuw compileren die zijn gewijzigd. Het inschakelen van incrementele compilatie kan de bouwtijden voor grote projecten drastisch verkorten. Dit is met name belangrijk voor projecten met een groot aantal bestanden en afhankelijkheden.

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}

Projectreferenties

Projectreferenties stellen je in staat om grote TypeScript-projecten te structureren in kleinere, onafhankelijke modules. Dit kan bouwtijden en code-organisatie verbeteren. Het gebruik van projectreferenties kan grote projecten beheersbaarder en gemakkelijker te onderhouden maken. Het is een 'best practice' om projectreferenties te gebruiken voor grote, complexe projecten.

{
  "compilerOptions": {
    "composite": true
  },
  "references": [
    { "path": "./module1" },
    { "path": "./module2" }
  ]
}

Aangepaste Type Definities

Soms moet je mogelijk typedefinities aanleveren voor JavaScript-bibliotheken die deze niet hebben. Je kunt aangepaste .d.ts-bestanden maken om de typen voor deze bibliotheken te definiëren. Het maken van aangepaste typedefinities stelt je in staat om JavaScript-bibliotheken in je TypeScript-code te gebruiken zonder in te boeten aan typeveiligheid. Dit is met name handig bij het werken met verouderde JavaScript-code of bibliotheken die geen eigen typedefinities bieden.

// custom.d.ts
declare module 'my-library' {
  export function doSomething(x: number): string;
}

Best Practices

Probleemoplossing voor Veelvoorkomende Problemen

Het configureren van tsconfig.json kan soms een uitdaging zijn. Hier zijn enkele veelvoorkomende problemen en hun oplossingen:

Problemen met Module-resolutie

Als je fouten bij module-resolutie tegenkomt, zorg er dan voor dat de moduleResolution-optie correct is geconfigureerd en dat de opties baseUrl en paths correct zijn ingesteld. Controleer de paden die zijn gespecificeerd in de paths-optie om er zeker van te zijn dat ze correct zijn. Verifieer dat alle benodigde modules zijn geïnstalleerd in de node_modules-map.

Typefouten

Typefouten kunnen optreden als de typedefinities onjuist zijn of ontbreken. Zorg ervoor dat je de juiste typedefinities hebt geïnstalleerd voor alle bibliotheken die je gebruikt. Als je een JavaScript-bibliotheek gebruikt die geen typedefinities heeft, overweeg dan om aangepaste typedefinities te maken.

Compilatiefouten

Compilatiefouten kunnen optreden als er syntaxisfouten of typefouten in je TypeScript-code zitten. Bekijk de foutmeldingen zorgvuldig en corrigeer eventuele syntaxisfouten of typefouten. Zorg ervoor dat je code de TypeScript-codeconventies volgt.

Conclusie

Een goed geconfigureerd tsconfig.json-bestand is essentieel voor een succesvol TypeScript-project. Door de essentiële compiler-opties en geavanceerde configuraties te begrijpen, kun je je ontwikkelworkflow optimaliseren, de codekwaliteit verbeteren en compatibiliteit met de doelomgeving waarborgen. Tijd investeren in het correct configureren van tsconfig.json zal op de lange termijn lonen door fouten te verminderen, de onderhoudbaarheid te verbeteren en het buildproces te stroomlijnen. Dit resulteert in efficiëntere en betrouwbaardere softwareontwikkeling. De hier verstrekte informatie is ontworpen om universeel toepasbaar te zijn en zou een solide basis moeten bieden om een nieuw project met TypeScript te starten.

Vergeet niet de officiële TypeScript-documentatie te raadplegen voor de meest actuele informatie en gedetailleerde uitleg van alle beschikbare compiler-opties. De TypeScript-documentatie is een waardevolle bron voor het begrijpen van de finesses van TypeScript-configuratie.