TypeScript 5.0: Wat is er nieuw en waarom is het belangrijk?

Wat is TypeScript?

Gemoderniseerde decorators

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();

Voorbeeld: exacte typen behouden

//typescript
function krijgExacteNamen<const T extends readonly string[]>(namen: T): T {
    return namen;
}

const landen = krijgExacteNamen(['Nederland', 'België', 'Duitsland']);
// Type van 'landen' is nu readonly ['Nederland', 'België', 'Duitsland']

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

Wat betekent dit voor ontwikkelaars?

Bundler resolutie

Verbeterde JSX ondersteuning

Vergelijking met TypeScript 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.