Gerade ist mit TypeScript 4.9 eine neue Version erschienen, auf die vielleicht einige schon gewartet haben. TypeScript 4.9 wurde pünktlich, wie vom Microsoft-Team zu erwarten, veröffentlicht und soll die letzte Version vor dem 5.0 Release im März 2023 sein. In diesem Artikel verschaffen wir uns einen groben Überblick über die neuen Features.

Der satisfies-Operator

Wer die Neuigkeiten rund um TypeScript verfolgt, der wird vermutlich bereits über den neuen satisfies-Operator gestolpert sein. Mit diesem wird geprüft, ob Ausdrücke korrekt verwendet werden, ohne gleichzeitig Informationen über sie zu verlieren. Das Entwickler:innen-Team liefert hier folgendes Beispiel:

// Each property can be a string or an RGB tuple.
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255]
//  ^^^^ sacrebleu - we've made a typo!
};

// We want to be able to use array methods on 'red'...
const redComponent = palette.red.at(0);

// or string methods on 'green'...
const greenNormalized = palette.green.toUpperCase();

Man könnte zwar mit einer Type Annotation auf palette arbeiten, würde dabei aber Informationen über jede einzelne Property verlieren. Mit dem neuen satisfies-Operator kann der Tippfehler folgendermaßen gefunden werden:

type Colors = "red" | "green" | "blue";

type RGB = [red: number, green: number, blue: number];

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255]
//  ~~~~ The typo is now caught!
} satisfies Record<Colors, string | RGB>;

// Both of these methods are still accessible!
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

Das vollständige Beispiel findet sich in den Release Notes.

Der in-Operator

Neu ist auch der in-Operator, der an den gleichnamigen Operator in JavaScript angelehnt ist. Mit diesem wird das Property Narrowing ermöglicht. Auch hier ein Codebeispiel:

interface Context {
    packageJSON: unknown;
}

function tryGetPackageName(context: Context) {
    const packageJSON = context.packageJSON;
    // Check to see if we have an object.
    if (packageJSON && typeof packageJSON === "object") {
        // Check to see if it has a string name property.
        if ("name" in packageJSON && typeof packageJSON.name === "string") {
        //                                              ~~~~
        // error! Property 'name' does not exist on type 'object.
            return packageJSON.name;
        //                     ~~~~
        // error! Property 'name' does not exist on type 'object.
        }
    }

    return undefined;
}

Mit dem neuen Operator wird dieser Fehler aufgelöst:

interface Context {
    packageJSON: unknown;
}

function tryGetPackageName(context: Context): string | undefined {
    const packageJSON = context.packageJSON;
    // Check to see if we have an object.
    if (packageJSON && typeof packageJSON === "object") {
        // Check to see if it has a string name property.
        if ("name" in packageJSON && typeof packageJSON.name === "string") {
            // Just works!
            return packageJSON.name;
        }
    }

    return undefined;
}

auto-accessors

Bereits in der Beta, aber nicht in der dazugehörigen Dokumentation enthalten, ist ein kommendes Feature in ECMAScript, namens Auto-Accessors:

Auto-accessors are declared just like properties on classes, except that they’re declared with the accessor keyword. Under the covers, these auto-accessors "de-sugar" to a get and set accessor with an unreachable private property.

Mehr dazu findet ihr in den Release Notes oder dem ursprünglichen Pull Request.

Performance Verbesserungen

Die forEachChild-Funktion wurde refaktorisiert, was laut Entwickler:innen-Team eine Zeitersparnis von etwa 20 % in der Binding Phase bedeutet. Gleiches wurde auch für die visitEachChild-Funktion vorgenommen, mit dem Ergebnis von 3 % weniger benötigter Zeit, die für den Project Output benötigt wird. Auch Entwickler:innen, die in ihrem Code viel auf Coditional Types setzen können mit einer leichten Performace-Verbesserung rechnen.

Mehr zu den Performance-Verbesserungen findet ihr in den Release Notes, in denen auch die jeweiligen Pull Requests gelistet sind.

Neu: "Remove Unused Imports", "Sort Imports" Go-to-Definition für return-Keywords

Seit der Beta sind auch neue Features hinzugekommen, darunter der "Remove Unused Imports"-Befehl. Wie der Name vermuten lässt, werden hiermit ungenutzte Import Names und Statements entfernt, die Anordnung bleibt dabei aber unverändert. Ebenfalls ist "Sort Imports" hinzugekommen, wodurch Imports sortiert werden. Damit wurde der bereits länger integrierte Befehl "Organize Imports" praktisch in zwei Befehle zerlegt.

Außerdem wurde ein Feature bezüglich des return-Keywords eingeführt, das ebenfalls nicht in der Beta vorhanden war: Wenn man im Editor eine go-to-definition mit return ausführt, springt TypeScript jetzt an den Anfang der entsprechenden Funktion.

Wie geht es weiter?

Mit TypeScript 4.9 wurde die letzte Version vor dem 5.0 Major Release veröffentlicht. Für Version 5.0 ist das Beta Release für den 24. Januar angedacht, der Release Candidate für den 28. Februar und das Final Release am 14. März 2023. Hier geht es zu den vollständigen Release Notes und dem TypeScript 5.0 Iteration Plan.