typescript-5-bergfort.jpg

Over TypeScript 5.0

TypeScript 5.0, uitgebracht op 16 maart 2023, markeert een belangrijke mijlpaal in de evolutie van deze populaire programmeertaal. Deze versie introduceert verbeteringen die de taal niet alleen sneller en efficiënter maken, maar ook gebruiksvriendelijker en beter voorbereid op toekomstige JavaScript-functionaliteiten. In dit artikel duiken we diep in de nieuwe functies van TypeScript 5.0, leggen we de verschillen uit met eerdere versies en laten we zien hoe je de nieuwe mogelijkheden kunt benutten in jouw projecten.

Wat is TypeScript?

Voor wie nieuw is met TypeScript: dit is een superset van JavaScript die statische typecontrole en andere handige functies toevoegt aan het ontwikkelproces. TypeScript is vooral populair vanwege de verbeterde leesbaarheid en foutdetectie in grote codebases. Het compileert naar gewoon JavaScript, zodat het kan draaien in elke browser of JavaScript-runtime.
Met elke nieuwe versie voegt TypeScript nieuwe functies toe en stroomlijnt het bestaande workflows. TypeScript 5.0 is hierin geen uitzondering: het biedt een reeks tools en verbeteringen die je productiviteit kunnen verhogen en de betrouwbaarheid van je codebase verbeteren.

Gemoderniseerde decorators

Decorators bestaan al enige tijd in TypeScript, maar tot versie 5.0 waren ze slechts als een experimentele functie beschikbaar. In TypeScript 5.0 zijn decorators volledig gemoderniseerd en in lijn gebracht met het ECMAScript-voorstel dat momenteel in stadium 3 is. Dit betekent dat je nu een gestandaardiseerde manier hebt om met decorators te werken.
Decorators bieden een krachtige manier om gedrag aan klassen of specifieke class members toe te voegen of aan te passen. Ze worden vaak gebruikt in frameworks zoals Angular en NestJS, maar de nieuwe implementatie maakt ze breder toepasbaar.

Voorbeeld: Een decorator gebruiken

//typescript
function logExecution(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Methode ${propertyKey} wordt uitgevoerd.`);
        return originalMethod.apply(this, args);
    };
}

class Persoon {
    naam: string;
    leeftijd: number;

    constructor(naam: string, leeftijd: number) {
        this.naam = naam;
        this.leeftijd = leeftijd;
    }

    @logExecution
    begroet() {
        console.log(`Hallo, mijn naam is ${this.naam}.`);
    }
}

const p = new Persoon('Jan', 25);
p.begroet();

In dit voorbeeld wordt de logExecution-decorator gebruikt om een logbericht weer te geven telkens wanneer de methode begroet wordt aangeroepen. In eerdere versies moest je extra instellingen aanpassen om decorators te gebruiken. TypeScript 5.0 maakt dit eenvoudiger.

Const type parameters

 
Een andere belangrijke toevoeging is de ondersteuning voor const-typeparameters. Dit biedt meer precisie bij het definiëren van types en maakt het gemakkelijker om met vaste waarden te werken zonder afbreuk te doen aan type-inferentie.
Met const kun je aangeven dat een generiek type exact overeen moet komen met een opgegeven waarde of set waarden. Dit verhoogt de typeveiligheid en voorkomt onverwacht gedrag.

Voorbeeld: exacte typen behouden


Hier zorgt de const-modifier ervoor dat het type van landen exact overeenkomt met de opgegeven waarden, in plaats van te worden gedegradeerd tot een generieke array van strings (string[]). Dit maakt het gemakkelijker om fouten te vermijden in scenario's waarin exacte waarden belangrijk zijn.

Verbeteringen aan enums

In TypeScript 5.0 is de werking van enums aanzienlijk verbeterd. Waar enums in eerdere versies vatbaar waren voor onverwachte waarden, heeft deze release enums veranderd in zogenaamde union enums, wat betekent dat ze nu alleen vooraf gedefinieerde waarden accepteren.

Voorbeeld: betere typeveiligheid met enums

//typescript
enum Kleur {
    Rood,
    Groen,
    Blauw,
}

function isPrimaireKleur(kleur: Kleur): boolean {
    return kleur === Kleur.Rood || kleur === Kleur.Groen || kleur === Kleur.Blauw;
}

console.log(isPrimaireKleur(Kleur.Rood)); // true
console.log(isPrimaireKleur(3)); // Fout in TypeScript 5.0

Voorheen kon het doorgeven van een waarde zoals 3 (die niet gedefinieerd is in de Kleur-enum) onverwachte resultaten opleveren. In TypeScript 5.0 wordt dit nu als een fout gemarkeerd, wat leidt tot robuustere en betrouwbaardere code.

Prestatieverbeteringen

Naast functionele verbeteringen heeft TypeScript 5.0 ook een focus op prestaties. De pakketgrootte is verkleind door het verwijderen van verouderde code en het moderniseren van de interne architectuur. Daarnaast is de ondersteuning voor moderne buildtools zoals esbuild en webpack uitgebreid, wat snellere build- en compileertijden mogelijk maakt.

Wat betekent dit voor ontwikkelaars?

Kleinere pakketgrootte: Hierdoor worden projecten met TypeScript sneller geladen en gebruikt.
Snellere compilatie: Vooral merkbaar in grote projecten met veel modules.
Betere compatibiliteit: Door de migratie van namespaces naar ES-modules is het eenvoudiger om moderne tools en workflows te gebruiken.

Bundler resolutie

Een ander handig aspect van TypeScript 5.0 is de verbeterde ondersteuning voor module-resolutie, specifiek gericht op bundlers zoals webpack en esbuild. Dit maakt de integratie met bestaande toolchains eenvoudiger en vermindert de noodzaak van complexe configuraties.

Verbeterde JSX ondersteuning

Voor ontwikkelaars die werken met frameworks zoals React biedt TypeScript 5.0 ook verbeteringen in de ondersteuning van JSX. Dit betekent dat het gemakkelijker wordt om met componenten te werken en typen voor props nauwkeuriger te definiëren.

Vergelijking met TypeScript 4.9

TypeScript 5.0 brengt een aantal significante verbeteringen ten opzichte van versie 4.9:
  • Decorators: In 4.9 waren ze experimenteel en niet gestandaardiseerd; in 5.0 zijn ze volledig ondersteund volgens ECMAScript-specificaties. Dit maakt ze betrouwbaarder en breder toepasbaar.
  • Const Type Parameters: Deze nieuwe functie, niet beschikbaar in 4.9, zorgt voor exacte typen en meer controle over generieke functies. Het verhoogt de typeveiligheid in complexe codebases.
  • Enums: Waar enums in 4.9 nog vatbaar waren voor ongeldige waarden, biedt 5.0 veilige union enums. Dit voorkomt fouten en verbetert de betrouwbaarheid van je code.
  • Prestatieverbeteringen: 4.9 had grotere pakketten en langzamere compilatietijden; 5.0 biedt kleinere pakketten en snellere builds. Dit maakt het vooral geschikt voor grotere projecten.
  • JSX ondersteuning: JSX was al bruikbaar in 4.9, maar in 5.0 zijn props nauwkeuriger getypeerd. Dit helpt ontwikkelaars om foutloze componenten te bouwen.
Kortom, TypeScript 5.0 biedt meer kracht, flexibiliteit en snelheid, waardoor het een waardevolle upgrade is voor elke ontwikkelaar.
typescript-5-bergfort.jpg