In diesem Artikel lernst du die \u00c4nderungen in TypeScript 5.0 kennen und erh\u00e4ltst einen detaillierten Einblick in die neuen Funktionen und M\u00f6glichkeiten.<\/p>\n
Erste Schritte mit TypeScript 5.0<\/h2>\n
TypeScript ist ein offizieller Compiler, den du mit npm<\/a> in deinem Projekt installieren kannst. Wenn du TypeScript 5.0 in deinem Projekt verwenden m\u00f6chtest, kannst du den folgenden Befehl im Verzeichnis deines Projekts ausf\u00fchren:<\/p>\n Dadurch wird der Compiler in das Verzeichnis node_modules<\/strong> installiert, das du nun mit dem Befehl Eine Anleitung zur Verwendung der neueren Version von TypeScript in Visual Studio Code findest du auch in dieser Dokumentation<\/a>.<\/p>\n\n In diesem Artikel stellen wir dir 5 wichtige Neuerungen in TypeScript vor. Zu diesen Funktionen geh\u00f6ren:<\/p>\n Decorators gibt es in TypeScript schon seit einiger Zeit unter einer experimentellen Flagge, aber die neue Version bringt sie auf den neuesten Stand des ECMAScript-Vorschlags, der sich jetzt in Phase 3<\/a> befindet, d.h. in einer Phase, in der er in TypeScript aufgenommen wird.<\/p>\n Decorators sind eine M\u00f6glichkeit, das Verhalten von Klassen und ihren Mitgliedern auf eine wiederverwendbare Weise anzupassen. Wenn du zum Beispiel eine Klasse hast, die zwei Methoden hat: In der Praxis sollte diese Klasse kompliziertere Methoden haben, die eine asynchrone Logik verarbeiten und Seiteneffekte haben, z. B. wenn du einige Das ist ein h\u00e4ufig auftretendes Muster, und es w\u00e4re praktisch, eine L\u00f6sung zu haben, die auf jede Methode angewendet werden kann.<\/p>\n An dieser Stelle kommen die Dekoratoren ins Spiel. Wir k\u00f6nnen eine Funktion namens Im obigen Code nimmt Durch die Verwendung von Dekoratoren kannst du die Dies gibt das Folgende aus:<\/p>\n Bei der Definition der Decorator-Funktion ( Wenn du deinen Code ausf\u00fchrst, enth\u00e4lt die Ausgabe jetzt den Namen jeder Methode, die mit dem Es gibt noch mehr, was du mit Dekoratoren machen kannst. Weitere Informationen \u00fcber die Verwendung von Dekoratoren in TypeScript findest du im urspr\u00fcnglichen Pull Request<\/a>.<\/p>\n Dies ist eine weitere gro\u00dfe Neuerung, die dir mit Generics ein neues Werkzeug an die Hand gibt, mit dem du die Inferenz beim Aufruf von Funktionen verbessern kannst. Wenn du Werte mit Um die gew\u00fcnschte Schlussfolgerung zu erhalten, musstest du bisher die Const-Assertion verwenden, indem du „as const“ hinzuf\u00fcgst:<\/p>\n Wenn du Funktionen aufrufst, ist es \u00e4hnlich. Im folgenden Code ist der gefolgerte Typ von L\u00e4ndern<\/strong> M\u00f6glicherweise m\u00f6chtest du einen spezifischeren Typ, den du bisher nur durch Hinzuf\u00fcgen der Das kann schwierig zu merken und zu implementieren sein. TypeScript 5.0 f\u00fchrt jedoch eine neue Funktion ein, mit der du einen const-Modifikator zu einer Typparameter-Deklaration hinzuf\u00fcgen kannst, der automatisch eine const-\u00e4hnliche Inferenz als Standard anwendet.<\/p>\n Die Verwendung von Weitere Informationen dar\u00fcber, wie der Typparameter const in TypeScript funktioniert, findest du im urspr\u00fcnglichen Pull Request<\/a>.<\/p>\n Enums in TypeScript sind ein leistungsf\u00e4higes Konstrukt, das es Entwicklern erm\u00f6glicht, eine Reihe von benannten Konstanten zu definieren. In TypeScript 5.0 wurden Verbesserungen an Enums vorgenommen, um sie noch flexibler und n\u00fctzlicher zu machen.<\/p>\n Wenn du zum Beispiel die folgende Enum in einer Funktion \u00fcbergeben hast:<\/p>\n Vor der Einf\u00fchrung von TypeScript 5.0 konntest du eine falsche Levelnummer \u00fcbergeben und es wurde kein Fehler ausgegeben. Aber mit der Einf\u00fchrung von TypeScript 5.0 wird sofort ein Fehler ausgegeben.<\/p>\n Au\u00dferdem werden in der neuen Version alle Enums zu Union Enums, indem f\u00fcr jedes berechnete Element ein eigener Typ erstellt wird. Diese Verbesserung erm\u00f6glicht es, alle Enums einzugrenzen und ihre Mitglieder als Typen zu referenzieren:<\/p>\n TypeScript 5.0 enth\u00e4lt zahlreiche wichtige \u00c4nderungen an der Codestruktur, den Datenstrukturen und den algorithmischen Erweiterungen. Dies hat dazu beigetragen, das gesamte TypeScript-Erlebnis von der Installation bis zur Ausf\u00fchrung zu verbessern und es schneller und effizienter zu machen.<\/p>\n Der Unterschied zwischen der Paketgr\u00f6\u00dfe von TypeScript 5.0 und 4.9 ist zum Beispiel ziemlich beeindruckend.<\/p>\n TypeScript wurde k\u00fcrzlich von namespaces zu modules migriert, wodurch es moderne Build-Tools nutzen kann, die Optimierungen wie Scope Hoisting durchf\u00fchren k\u00f6nnen. Au\u00dferdem konnten durch das Entfernen von veraltetem Code 26,4 MB von den 63,8 MB der TypeScript 4.9-Paketgr\u00f6\u00dfe eingespart werden.<\/p>\n Hier sind noch ein paar weitere interessante Verbesserungen bez\u00fcglich Geschwindigkeit und Gr\u00f6\u00dfe zwischen TypeScript 5.0 und 4.9:<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code> aufrufen kannst.<\/p>\nWas ist neu in TypeScript 5.0?<\/h2>\n
Modernisierte Dekoratoren<\/h3>\n
greet<\/code> und getAge<\/code>:<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n console.log(`Hello, my name is ${this.name}.`);\n }\n\n getAge() {\n console.log(`I am ${this.age} years old.`);\n }\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\nconsole.log<\/code> Aufrufe einbauen m\u00f6chtest, um die Methoden zu debuggen.<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n console.log('LOG: Method Execution Starts.');\n console.log(`Hello, my name is ${this.name}.`);\n console.log('LOG: Method Execution Ends.');\n }\n\n getAge() {\n console.log('LOG: Method Execution Starts.');\n console.log(`I am ${this.age} years old.`);\n console.log('Method Execution Ends.');\n }\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\ndebugMethod<\/code> definieren, die wie folgt aussieht:<\/p>\nfunction debugMethod(originalMethod: any, context: any) {\n function replacementMethod(this: any, ...args: any[]) {\n console.log('Method Execution Starts.');\n const result = originalMethod.call(this, ...args);\n console.log('Method Execution Ends.');\n return result;\n }\n return replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code> die urspr\u00fcngliche Methode (originalMethod<\/code>) und gibt eine Funktion zur\u00fcck, die Folgendes tut:<\/p>\n\n
debugMethod<\/code> auf deine Methoden anwenden, wie im folgenden Code gezeigt:<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n @debugMethod\n greet() {\n console.log(`Hello, my name is ${this.name}.`);\n }\n @debugMethod\n getAge() {\n console.log(`I am ${this.age} years old.`);\n }\n}\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\nLOG: Entering method.\nHello, my name is Ron.\nLOG: Exiting method.\nLOG: Entering method.\nI am 30 years old.\nLOG: Exiting method.<\/code><\/pre>\ndebugMethod<\/code>) wird ein zweiter Parameter mit dem Namen context<\/code> \u00fcbergeben (es ist das Kontextobjekt – es enth\u00e4lt einige n\u00fctzliche Informationen dar\u00fcber, wie die dekorierte Methode deklariert wurde und auch den Namen der Methode). Du kannst dein debugMethod<\/code> aktualisieren, um den Methodennamen aus dem context<\/code> Objekt zu erhalten:<\/p>\nfunction debugMethod(\n originalMethod: any,\n context: ClassMethodDecoratorContext\n) {\n const methodName = String(context.name);\n function replacementMethod(this: any, ...args: any[]) {\n console.log(`'${methodName}' Execution Starts.`);\n const result = originalMethod.call(this, ...args);\n console.log(`'${methodName}' Execution Ends.`);\n return result;\n }\n return replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code> Dekorator dekoriert wurde:<\/p>\n'greet' Execution Starts.\nHello, my name is Ron.\n'greet' Execution Ends.\n'getAge' Execution Starts.\nI am 30 years old.\n'getAge' Execution Ends.<\/code><\/pre>\nEinf\u00fchrung von const Type Parameters<\/h3>\n
const<\/code> deklarierst, schlussfolgert TypeScript standardm\u00e4\u00dfig den Typ und nicht die literalen Werte:<\/p>\n\/\/ Inferred type: string[]\nconst names = ['John', 'Jake', 'Jack'];<\/code><\/pre>\n\/\/ Inferred type: readonly [\"John\", \"Jake\", \"Jack\"]\nconst names = ['John', 'Jake', 'Jack'] as const;<\/code><\/pre>\nstring[]<\/code>:<\/p>\ntype HasCountries = { countries: readonly string[] };\nfunction getCountriesExactly(arg: T): T['countries'] {\n return arg.countries;\n}\n\n\/\/ Inferred type: string[]\nconst countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nas const<\/code> Assertion l\u00f6sen konntest:<\/p>\n\/\/ Inferred type: readonly [\"USA\", \"Canada\", \"India\"]\nconst names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] } as const);<\/code><\/pre>\ntype HasCountries = { countries: readonly string[] };\nfunction getNamesExactly(arg: T): T['countries'] {\n return arg.countries;\n}\n\n\/\/ Inferred type: readonly [\"USA\", \"Canada\", \"India\"]\nconst names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nconst<\/code> Typparametern erm\u00f6glicht es Entwicklern, ihre Absicht in ihrem Code deutlicher auszudr\u00fccken. Wenn eine Variable konstant sein und sich nie \u00e4ndern soll, stellt die Verwendung eines const<\/code> Typparameters sicher, dass sie nicht versehentlich ge\u00e4ndert werden kann.<\/p>\nVerbesserungen an Enums<\/h3>\n
enum Color {\n Red,\n Green,\n Blue,\n}\n\nfunction getColorName(colorLevel: Color) {\n return colorLevel;\n}\n\nconsole.log(getColorName(1));<\/code><\/pre>\nenum Color {\n Red,\n Purple,\n Orange,\n Green,\n Blue,\n Black,\n White,\n}\n\ntype PrimaryColor = Color.Red | Color.Green | Color.Blue;\n\nfunction isPrimaryColor(c: Color): c is PrimaryColor {\n return c === Color.Red || c === Color.Green || c === Color.Blue;\n}\n\nconsole.log(isPrimaryColor(Color.White)); \/\/ Outputs: false\nconsole.log(isPrimaryColor(Color.Red)); \/\/ Outputs: true<\/code><\/pre>\nLeistungsverbesserungen von TypeScript 5.0<\/h3>\n
![\"TypeScript-Paketgr\u00f6\u00dfe\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")