Was ist neu in TypeScript 5.0: Deklaratoren, Const Type, Enums-Verbesserung, Geschwindigkeit und vieles mehr!

TypeScript 5.0 wurde offiziell am 16. März 2023 veröffentlicht und steht nun allen zur Nutzung zur Verfügung. Diese Version führt viele neue Funktionen ein, mit dem Ziel, TypeScript kleiner, einfacher und schneller zu machen.

Diese neue Version modernisiert Dekorateure für die Anpassung von Klassen und ermöglicht die Anpassung von Klassen und ihren Mitgliedern auf wiederverwendbare Weise. Entwickler können jetzt einen const-Modifizierer zu einer Typparameterdeklaration hinzufügen, wodurch const-ähnliche Rückschlüsse als Standard verwendet werden können. Die neue Version macht auch alle Aufzählungen zu Vereinigungsaufzählungen, wodurch die Codestruktur vereinfacht und die TypeScript-Erfahrung beschleunigt wird.

In diesem Artikel werden Sie die in TypeScript 5.0 eingeführten Änderungen untersuchen und einen detaillierten Einblick in die neuen Funktionen und Möglichkeiten erhalten.

Erste Schritte mit TypeScript 5.0

TypeScript ist ein offizieller Compiler, den Sie mit npm in Ihr Projekt installieren können. Wenn Sie beginnen möchten, TypeScript 5.0 in Ihrem Projekt zu verwenden, können Sie den folgenden Befehl im Verzeichnis Ihres Projekts ausführen:

 npm install -D typescript

Dadurch wird der Compiler im Verzeichnis node_modules installiert, den Sie nun mit dem Befehl npx tsc ausführen können.

In dieser Dokumentation finden Sie auch Anweisungen zur Verwendung der neueren Version von TypeScript in Visual Studio Code.

Was ist neu in TypeScript 5.0?

Lassen Sie uns in diesem Artikel 5 wichtige Updates untersuchen, die in TypeScript eingeführt wurden. Zu diesen Funktionen gehören:

Modernisierte Dekorateure

Dekorateure sind in TypeScript schon seit einiger Zeit unter einer experimentellen Flagge unterwegs, aber die neue Version bringt sie mit dem ECMAScript-Vorschlag auf den neuesten Stand, der sich jetzt in Phase 3 befindet, was bedeutet, dass er in einer Phase ist, in der er zu TypeScript hinzugefügt wird.

Dekorateure sind eine Möglichkeit, das Verhalten von Klassen und ihren Mitgliedern auf wiederverwendbare Weise anzupassen. Wenn Sie beispielsweise eine Klasse mit zwei Methoden haben, greet und getAge :

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name}.`); } getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

In realen Anwendungsfällen sollte diese Klasse kompliziertere Methoden haben, die einige asynchrone Logik verarbeiten und Nebeneffekte usw. haben, wo Sie einige console.log Aufrufe einwerfen sollten, um das Debuggen der Methoden zu unterstützen.

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log('LOG: Method Execution Starts.'); console.log(`Hello, my name is ${this.name}.`); console.log('LOG: Method Execution Ends.'); } getAge() { console.log('LOG: Method Execution Starts.'); console.log(`I am ${this.age} years old.`); console.log('Method Execution Ends.'); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Dies ist ein häufig vorkommendes Muster, und es wäre praktisch, eine Lösung zu haben, die auf jede Methode angewendet werden kann.

Hier kommen Dekorateure ins Spiel. Wir können eine Funktion namens debugMethod definieren, die wie folgt aussieht:

 function debugMethod(originalMethod: any, context: any) { function replacementMethod(this: any, ...args: any[]) { console.log('Method Execution Starts.'); const result = originalMethod.call(this, ...args); console.log('Method Execution Ends.'); return result; } return replacementMethod; }

Im obigen Code nimmt debugMethod die ursprüngliche Methode ( originalMethod ) und gibt eine Funktion zurück, die Folgendes tut:

1. Protokolliert eine Meldung „Method Execution Starts.“
2. Übergibt die ursprüngliche Methode und alle ihre Argumente (einschließlich diesem).
3. Protokolliert eine Meldung „Method Execution Ends.“
4. Gibt zurück, was auch immer die ursprüngliche Methode zurückgegeben hat.

Durch die Verwendung von Dekoratoren können Sie die debugMethod auf Ihre Methoden anwenden, wie im folgenden Code gezeigt:

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } @debugMethod greet() { console.log(`Hello, my name is ${this.name}.`); } @debugMethod getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

Dies wird Folgendes ausgeben:

 LOG: Entering method. Hello, my name is Ron. LOG: Exiting method. LOG: Entering method. I am 30 years old. LOG: Exiting method.

Beim Definieren der Decorator-Funktion ( debugMethod ) wird ein zweiter Parameter namens context übergeben (es ist das Kontextobjekt – enthält einige nützliche Informationen darüber, wie die dekorierte Methode deklariert wurde, sowie den Namen der Methode). Sie können Ihre debugMethod aktualisieren, um den Methodennamen aus dem context abzurufen:

 function debugMethod( originalMethod: any, context: ClassMethodDecoratorContext ) { const methodName = String(context.name); function replacementMethod(this: any, ...args: any[]) { console.log(`'${methodName}' Execution Starts.`); const result = originalMethod.call(this, ...args); console.log(`'${methodName}' Execution Ends.`); return result; } return replacementMethod; }

Wenn Sie Ihren Code ausführen, trägt die Ausgabe jetzt den Namen jeder Methode, die mit dem Dekorator debugMethod dekoriert ist:

 'greet' Execution Starts. Hello, my name is Ron. 'greet' Execution Ends. 'getAge' Execution Starts. I am 30 years old. 'getAge' Execution Ends.

Es gibt noch mehr, was Sie mit Dekorateuren tun können. Weitere Informationen zur Verwendung von Decorators in TypeScript finden Sie im ursprünglichen Pull-Request.

Einführung von const-Typparametern

Dies ist eine weitere große Version, die Ihnen ein neues Tool mit Generika zur Verfügung stellt, um die Rückschlüsse zu verbessern, die Sie erhalten, wenn Sie Funktionen aufrufen. Wenn Sie Werte mit const deklarieren, leitet TypeScript standardmäßig den Typ und nicht seine Literalwerte ab:

 // Inferred type: string[] const names = ['John', 'Jake', 'Jack'];

Um die gewünschte Inferenz zu erreichen, mussten Sie bisher die const-Assertion verwenden, indem Sie „as const“ hinzufügen:

 // Inferred type: readonly ["John", "Jake", "Jack"] const names = ['John', 'Jake', 'Jack'] as const;

Wenn Sie Funktionen aufrufen, ist es ähnlich. Im folgenden Code ist der abgeleitete Ländertyp string[] :

 type HasCountries = { countries: readonly string[] }; function getCountriesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: string[] const countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });

Möglicherweise wünschen Sie sich einen spezifischeren Typ, den Sie zuvor beheben konnten, indem Sie die Assertion as const hinzufügen:

 // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] } as const);

Dies kann schwierig zu merken und umzusetzen sein. TypeScript 5.0 führt jedoch eine neue Funktion ein, mit der Sie einer Typparameterdeklaration einen const-Modifizierer hinzufügen können, der automatisch eine const-ähnliche Inferenz als Standard anwendet.

 type HasCountries = { countries: readonly string[] }; function getNamesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });

Die Verwendung von Parametern vom Typ const ermöglicht es Entwicklern, die Absicht in ihrem Code klarer auszudrücken. Wenn eine Variable konstant sein und sich nie ändern soll, stellt die Verwendung eines Parameters vom Typ const sicher, dass sie niemals versehentlich geändert werden kann.

Weitere Informationen zur Funktionsweise des const-Typparameters in TypeScript finden Sie im ursprünglichen Pull-Request.

Verbesserungen an Enums

Enums in TypeScript sind ein leistungsstarkes Konstrukt, mit dem Entwickler eine Reihe benannter Konstanten definieren können. In TypeScript 5.0 wurden Verbesserungen an Aufzählungen vorgenommen, um sie noch flexibler und nützlicher zu machen.

Wenn Sie beispielsweise die folgende Aufzählung an eine Funktion übergeben haben:

 enum Color { Red, Green, Blue, } function getColorName(colorLevel: Color) { return colorLevel; } console.log(getColorName(1));

Vor der Einführung von TypeScript 5.0 konnten Sie eine falsche Ebenennummer übergeben, und es wurde kein Fehler ausgegeben. Aber mit der Einführung von TypeScript 5.0 wird es sofort einen Fehler werfen.

Außerdem macht die neue Version alle Aufzählungen zu Union-Aufzählungen, indem für jedes berechnete Element ein eindeutiger Typ erstellt wird. Diese Erweiterung ermöglicht die Eingrenzung aller Aufzählungen und die Referenzierung ihrer Mitglieder als Typen:

 enum Color { Red, Purple, Orange, Green, Blue, Black, White, } type PrimaryColor = Color.Red | Color.Green | Color.Blue; function isPrimaryColor(c: Color): c is PrimaryColor { return c === Color.Red || c === Color.Green || c === Color.Blue; } console.log(isPrimaryColor(Color.White)); // Outputs: false console.log(isPrimaryColor(Color.Red)); // Outputs: true

Leistungsverbesserungen von TypeScript 5.0

TypeScript 5.0 enthält zahlreiche signifikante Änderungen in der Codestruktur, Datenstrukturen und algorithmischen Erweiterungen. Dies hat dazu beigetragen, das gesamte TypeScript-Erlebnis von der Installation bis zur Ausführung zu verbessern und es schneller und effizienter zu machen.

Beispielsweise ist der Unterschied zwischen der Paketgröße von TypeScript 5.0 und 4.9 ziemlich beeindruckend.

TypeScript wurde kürzlich von Namespaces zu Modulen migriert, sodass es moderne Build-Tools nutzen kann, die Optimierungen wie das Anheben des Bereichs durchführen können. Außerdem hat das Entfernen von veraltetem Code etwa 26,4 MB von der Paketgröße von TypeScript 4.9 von 63,8 MB eingespart.

Hier sind einige weitere interessante Geschwindigkeits- und Größenvorteile zwischen TypeScript 5.0 und 4.9:

Bundler-Auflösung für bessere Modulauflösung

Wenn Sie eine Importanweisung in TypeScript schreiben, muss der Compiler wissen, worauf sich der Import bezieht. Dies geschieht mithilfe der Modulauflösung. Wenn Sie beispielsweise import { a } from "moduleA" schreiben, muss der Compiler die Definition von a in moduleA kennen, um seine Verwendung zu überprüfen.

In TypeScript 4.7 wurden zwei neue Optionen für die Einstellungen --module und moduleResolution hinzugefügt: node16 und nodenext .

Der Zweck dieser Optionen bestand darin, die genauen Suchregeln für ECMAScript-Module in Node.js genauer darzustellen. Dieser Modus hat jedoch mehrere Einschränkungen, die von anderen Tools nicht erzwungen werden.

Beispielsweise muss in einem ECMAScript-Modul in Node.js jeder relative Import eine Dateierweiterung enthalten, damit er ordnungsgemäß funktioniert:

 import * as utils from "./utils"; // Wrong import * as utils from "./utils.mjs"; // Correct

TypeScript hat eine neue Strategie namens „moduleResolution bundler“ eingeführt. Diese Strategie kann durch Hinzufügen des folgenden Codes im Abschnitt „compilerOptions“ Ihrer TypeScript-Konfigurationsdatei implementiert werden:

 { "compilerOptions": { "target": "esnext", "moduleResolution": "bundler" } }

Diese neue Strategie eignet sich für diejenigen, die moderne Bundler wie Vite, esbuild, swc, Webpack, Parcel und andere verwenden, die eine hybride Suchstrategie verwenden.

Sie können die ursprüngliche Pull-Anforderung und ihre Implementierung auf weitere Informationen zur Funktionsweise moduleResolution Bundlers in TypeScript überprüfen.

Abwertungen

TypeScript 5.0 bringt einige Abwertungen mit sich, darunter Laufzeitanforderungen, lib.d.ts-Änderungen und API Breaking Changes.

1. Laufzeitanforderungen: TypeScript zielt jetzt auf ECMAScript 2018 ab, und das Paket legt eine minimale Engine-Erwartung von 12.20 fest. Daher sollten Benutzer von Node.js eine Mindestversion von 12.20 oder höher haben, um TypeScript 5.0 verwenden zu können.
2. lib.d.ts-Änderungen: Es gab einige Änderungen an der Art und Weise, wie Typen für das DOM generiert werden, was sich auf bestehenden Code auswirken kann. Insbesondere wurden bestimmte Eigenschaften von Zahlen- in numerische Literaltypen konvertiert, und Eigenschaften und Methoden für die Behandlung von Ereignissen zum Ausschneiden, Kopieren und Einfügen wurden über Schnittstellen hinweg verschoben.
3. API Breaking Changes: Einige unnötige Schnittstellen wurden entfernt und einige Korrektheitsverbesserungen vorgenommen. TypeScript 5.0 wurde ebenfalls in Module verschoben.

TypeScript 5.0 hat bestimmte Einstellungen und deren entsprechende Werte als veraltet markiert, darunter target: ES3 , out , noImplicitUseStrict , keyofStringsOnly , suppressExcessPropertyErrors , suppressImplicitAnyIndexErrors , noStrictGenericChecks , charset , importsNotUsedAsValues ​​und preserveValueImports sowie vorangestellt in Projektreferenzen.

Obwohl diese Konfigurationen bis TypeScript 5.5 gültig bleiben, wird eine Warnung ausgegeben, um Benutzer zu warnen, die sie noch verwenden.

Zusammenfassung

In diesem Artikel haben Sie einige der wichtigsten Funktionen und Verbesserungen kennengelernt, die TypeScript 5.0 mit sich bringt, wie z. B. Verbesserungen an Enums, Bundler-Auflösung und konstanten Typparametern sowie Verbesserungen an Geschwindigkeit und Größe.

Wenn du für deine nächsten Projekte über TypeScript nachdenkst, probiere Kinstas Application Hosting kostenlos aus.

Jetzt bist du dran! Welche Funktionen oder Verbesserungen finden Sie in TypeScript 5.0 am attraktivsten? Gibt es irgendwelche wichtigen, die wir vielleicht übersehen haben? Lass es uns in den Kommentaren wissen.