{"id":608,"date":"2023-04-21T09:00:00","date_gmt":"2023-04-21T07:00:00","guid":{"rendered":"https:\/\/rising-bits.com\/?p=608"},"modified":"2023-04-16T17:28:36","modified_gmt":"2023-04-16T15:28:36","slug":"besser-schneller-effizienter-die-leistungsverbesserungen-von-typescript-5-im-vergleich-zu-typescript-4","status":"publish","type":"post","link":"https:\/\/rising-bits.com\/en\/besser-schneller-effizienter-die-leistungsverbesserungen-von-typescript-5-im-vergleich-zu-typescript-4\/","title":{"rendered":"Besser, schneller, effizienter: Die Leistungsverbesserungen von TypeScript 5 im Vergleich zu TypeScript 4"},"content":{"rendered":"\n<p>Typescript ist eine der beliebtesten Programmiersprachen der letzten Jahre. Mit jeder neuen Version bietet die Sprache verbesserte Features und Funktionen, die Entwicklern helfen, bessere und zuverl\u00e4ssigere Code zu schreiben. TypeScript 5 ist die neueste Version der Sprache und enth\u00e4lt eine Vielzahl von Verbesserungen und neuen Funktionen, die Entwicklern helfen, produktiver zu sein und bessere Codequalit\u00e4t zu erzielen. In diesem Artikel werfen wir einen Blick auf einige der wichtigsten Neuerungen von TypeScript 5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Type-First Development<\/h2>\n\n\n\n<p>Eines der Hauptmerkmale von TypeScript 5 ist das Konzept des &#8222;Type-First Development&#8220;. Mit TypeScript 5 wird der Fokus auf das Schreiben von Typen gelegt, bevor der Code geschrieben wird. Durch das Schreiben von Typen zuerst k\u00f6nnen Entwickler sicherstellen, dass ihr Code besser getestet und wartungsf\u00e4higer ist. Es hilft auch dabei, Fehler fr\u00fchzeitig zu erkennen und zu beheben, bevor der Code in Produktion geht.<\/p>\n\n\n\n<p>Angenommen, wir arbeiten an einer Funktion, die zwei Zahlen addiert und das Ergebnis zur\u00fcckgibt. Bevor wir mit dem Schreiben des Codes beginnen, w\u00fcrde wir zun\u00e4chst den Typ f\u00fcr diese Funktion definieren. In TypeScript k\u00f6nnte der Typ f\u00fcr die Funktion wie folgt aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\"> addNumbers(x: number, y: number): number {\n  return x + y;\n}<\/code><\/pre>\n\n\n\n<p>In diesem Beispiel definieren wir den Typ f\u00fcr die Funktion <code>addNumbers<\/code>. Wir geben an, dass die Funktion zwei Parameter vom Typ <code>number<\/code> erwartet und dass sie ein Ergebnis vom Typ <code>number<\/code> zur\u00fcckgibt. Nachdem wir den Typ definiert haben, k\u00f6nnen wir nun mit dem Schreiben des Codes beginnen.<\/p>\n\n\n\n<p>Durch die Definition des Typs zuerst stellen wir sicher, dass unser Code besser getestet und gewartet werden kann. Wir k\u00f6nnen den Typ verwenden, um sicherzustellen, dass die Funktion nur g\u00fcltige Eingabewerte akzeptiert und dass das zur\u00fcckgegebene Ergebnis den erwarteten Typ hat. Wenn wir den Typ nicht definiert h\u00e4tten und versucht h\u00e4tten, die Funktion ohne Typ zu schreiben, k\u00f6nnten wir m\u00f6glicherweise ung\u00fcltige Eingabewerte akzeptieren oder ein Ergebnis zur\u00fcckgeben, das nicht dem erwarteten Typ entspricht.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Statische Analyse<\/h2>\n\n\n\n<p>TypeScript 5 verf\u00fcgt \u00fcber eine verbesserte statische Analyse, die Entwicklern dabei hilft, Fehler fr\u00fchzeitig im Entwicklungsprozess zu erkennen. Die neue Version der Sprache erkennt nun mehrere Fehler, wie z.B. ungenutzte Variablen und ung\u00fcltige Importe. Dar\u00fcber hinaus bietet TypeScript 5 eine verbesserte Fehlermeldung, die Entwicklern hilft, den Fehlerort schnell zu finden und zu beheben.<\/p>\n\n\n\n<p>Angenommen, wir haben eine TypeScript-Datei mit dem folgenden Code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">const name = \"Max\";\nconsole.log(\"Hello, \" + nmae);<\/code><\/pre>\n\n\n\n<p>Es gibt einen offensichtlichen Tippfehler im obigen Code: <code>nmae<\/code> statt <code>name<\/code>. Wenn wir diesen Code ausf\u00fchrst, erhalten wir einen Fehler in der Konsole, dass <code>nmae<\/code> nicht definiert ist. Mit TypeScript 5 k\u00f6nnen wir jedoch statische Analyse verwenden, um diesen Fehler im Voraus zu erkennen, bevor wir den Code ausf\u00fchren.<\/p>\n\n\n\n<p>Um die statische Analyse in TypeScript 5 zu nutzen, m\u00fcssen wir die <code>--noEmit<\/code>-Option in der Befehlszeile oder in der Konfigurationsdatei angeben. Diese Option verhindert, dass TypeScript den Code kompiliert und ausf\u00fchrt, aber f\u00fchrt stattdessen eine statische Analyse des Codes durch und gibt potenzielle Fehlermeldungen aus.<\/p>\n\n\n\n<p>Wenn wir nun den oben genannten Code mit der <code>--noEmit<\/code>-Option ausf\u00fchren, erhalten wir die folgende Fehlermeldung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">test.ts:2:22 - error TS2304: Cannot find name 'nmae'. Did you mean 'name'?\n\nconsole.log(\"Hello, \" + nmae);\n                         ~~~~<\/code><\/pre>\n\n\n\n<p>Die Fehlermeldung zeigt uns genau, wo der Fehler liegt und bietet uns auch eine Korrekturvorschlag an, indem sie fragt, ob wir <code>name<\/code> statt <code>nmae<\/code> meinten. Diese statische Analyse von TypeScript 5 hilft uns, potenzielle Fehler im Code fr\u00fchzeitig zu erkennen, bevor wir ihn ausf\u00fchren, und somit sicherzustellen, dass unser Code zuverl\u00e4ssig und fehlerfrei ist.<\/p>\n\n\n\n<p>Ein weiteres Beispiel w\u00e4re die \u00dcberpr\u00fcfung von ung\u00fcltigen Importen. Wenn wir versuchen eine Datei zu importieren, die nicht vorhanden ist, oder eine Variable aus einer Datei zu importieren, die diese Variable nicht exportiert, gibt TypeScript 5 eine statische Fehlermeldung aus, um den Fehler fr\u00fchzeitig zu erkennen. Hier ist ein Beispielcode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">import { someFunc } from \".\/utils\";\n\nconsole.log(someFunc());<\/code><\/pre>\n\n\n\n<p>In diesem Beispiel importieren wir die Funktion <code>someFunc<\/code> aus einer Datei namens <code>utils<\/code>, die nicht vorhanden ist. Wenn wir versuchen, diesen Code auszuf\u00fchren, wird eine Laufzeitfehlermeldung ausgegeben. Aber wenn wir TypeScript 5 verwenden, um den Code statisch zu analysieren, erhalten wir die folgende Fehlermeldung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">test.ts:1:22 - error TS2307: Cannot find module '.\/utils'.\n\n1 import { someFunc } from \".\/utils\";\n                         ~~~~~~~~~~~<\/code><\/pre>\n\n\n\n<p>Die Fehlermeldung zeigt uns, dass die Datei <code>utils<\/code> nicht gefunden wurde, und gibt uns somit eine Chance, den Fehler fr\u00fchzeitig zu erkennen und zu beheben, bevor wir den Code ausf\u00fchren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Smartere Autocompletion<\/h2>\n\n\n\n<p>TypeScript 5 bietet eine verbesserte Autocompletion-Funktion, die Entwicklern dabei hilft, schnelleren und effektiveren Code zu schreiben. Die Autocompletion-Funktion erkennt nun die Absicht des Entwicklers und schl\u00e4gt die am wahrscheinlichsten verwendeten Optionen vor. Dar\u00fcber hinaus bietet TypeScript 5 auch verbesserte Vorschl\u00e4ge f\u00fcr Parameter, die auf dem aktuellen Kontext basieren.<\/p>\n\n\n\n<p>Angenommen, wir haben eine TypeScript-Datei mit dem folgenden Code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">interface Person {\n  name: string;\n  age: number;\n  email: string;\n}\n\nconst person: Person = {\n  name: \"Max\",\n  age: 30,\n  email: \"max@example.com\"\n}\n\nconsole.log(person.);<\/code><\/pre>\n\n\n\n<p>In diesem Beispiel haben wir eine Schnittstelle <code>Person<\/code> definiert und eine Variable <code>person<\/code> erstellt, die den Typ <code>Person<\/code> hat. Wir m\u00f6chten nun <code>console.log(person.<\/code> eingeben und Autocomplete verwenden, um uns Vorschl\u00e4ge f\u00fcr Eigenschaften von <code>person<\/code> anzuzeigen.<\/p>\n\n\n\n<p>Mit TypeScript 5 k\u00f6nnen wir jetzt smartere Autocomplete-Funktionen nutzen, die auf dem erwarteten Typ der Variable basieren. Wenn wir <code>person.<\/code> eingeben, zeigt uns der Editor nur die Eigenschaften an, die tats\u00e4chlich in der <code>Person<\/code>-Schnittstelle definiert sind. Dies macht die Autocomplete-Funktion viel effektiver, da sie uns nur die relevanten Vorschl\u00e4ge anzeigt.<\/p>\n\n\n\n<p>Wenn wir nun also <code>person.<\/code> eingeben, sehen wir die folgenden Vorschl\u00e4ge:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>name<\/code><\/li>\n\n\n\n<li><code>age<\/code><\/li>\n\n\n\n<li><code>email<\/code><\/li>\n<\/ul>\n\n\n\n<p>Wenn wir zum Beispiel <code>person.n<\/code> eingeben, vervollst\u00e4ndigt der Editor automatisch <code>name<\/code>, da es die einzige Eigenschaft ist, die mit &#8222;n&#8220; beginnt.<\/p>\n\n\n\n<p>Dies ist nur ein einfaches Beispiel f\u00fcr die smartere Autocomplete-Funktion in TypeScript 5. Aber es zeigt, wie diese Funktion uns dabei helfen kann, effektiver und schneller zu programmieren, indem sie uns nur relevante Vorschl\u00e4ge basierend auf dem erwarteten Typ der Variablen anzeigt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Neue Funktionen f\u00fcr Enums<\/h2>\n\n\n\n<p>Enums sind ein wichtiger Bestandteil von TypeScript. TypeScript 5 bietet eine neue Syntax f\u00fcr Enums, die Entwicklern mehr Flexibilit\u00e4t bei der Definition von Enums bietet. Mit der neuen Syntax k\u00f6nnen Entwickler nun Enums als Union-Typen definieren und k\u00f6nnen auch berechnete Werte f\u00fcr die einzelnen Elemente von Enums festlegen.<\/p>\n\n\n\n<p>Hier ein Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">enum Direction {\n  Up = \"UP\",\n  Down = \"DOWN\",\n  Left = \"LEFT\",\n  Right = \"RIGHT\"\n}\n\nfunction isVertical(direction: Direction) {\n  return direction === Direction.Up || direction === Direction.Down;\n}\n\nfunction isHorizontal(direction: Direction) {\n  return direction === Direction.Left || direction === Direction.Right;\n}\n\nconsole.log(isVertical(Direction.Up));    \/\/ true\nconsole.log(isVertical(Direction.Left));  \/\/ false\nconsole.log(isHorizontal(Direction.Right));  \/\/ true\nconsole.log(Direction[Direction.Up]);     \/\/ \"UP\"\nconsole.log(Direction[\"LEFT\"]);           \/\/ undefined<\/code><\/pre>\n\n\n\n<p>In diesem Beispiel haben wir eine Enum <code>Direction<\/code> definiert, die vier Werte enth\u00e4lt: &#8222;UP&#8220;, &#8222;DOWN&#8220;, &#8222;LEFT&#8220; und &#8222;RIGHT&#8220;. Wir haben auch zwei Funktionen <code>isVertical<\/code> und <code>isHorizontal<\/code> erstellt, die \u00fcberpr\u00fcfen, ob eine gegebene Richtung vertikal oder horizontal ist.<\/p>\n\n\n\n<p>Neu in TypeScript 5 ist die M\u00f6glichkeit, den Enum-Objekten zus\u00e4tzliche Methoden und Eigenschaften hinzuzuf\u00fcgen. In diesem Beispiel haben wir jedoch keine benutzerdefinierten Methoden oder Eigenschaften hinzugef\u00fcgt. Wir k\u00f6nnen jedoch auf die Schl\u00fcssel und Werte der Enum zugreifen, indem wir sie als Indizes verwenden. Zum Beispiel k\u00f6nnen wir <code>Direction[Direction.Up]<\/code> aufrufen und bekommen den String &#8222;UP&#8220; zur\u00fcck.<\/p>\n\n\n\n<p>Au\u00dferdem k\u00f6nnen wir die Typsicherheit von Enums jetzt verbessern, indem wir den Typ <code>keyof typeof<\/code> verwenden, um sicherzustellen, dass die \u00fcbergebene Variable eine g\u00fcltige Eigenschaft des Enums ist. Zum Beispiel k\u00f6nnen wir <code>keyof typeof Direction<\/code> verwenden, um sicherzustellen, dass eine \u00fcbergebene Variable eine g\u00fcltige Eigenschaft von <code>Direction<\/code> ist. Wenn wir beispielsweise <code>Direction[\"LEFT\"]<\/code> aufrufen, erhalten wir <code>undefined<\/code>, da &#8222;LEFT&#8220; nicht in der Enum definiert ist.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Performance-Optimierungen<\/h2>\n\n\n\n<p>TypeScript 5 verf\u00fcgt \u00fcber eine Reihe von Performance-Optimierungen, die die Geschwindigkeit der Sprache verbessern. Die neue Version der Sprache bietet schnellere Build-Zeiten und reduziert den Speicherbedarf f\u00fcr gro\u00dfe Codebasen. Dar\u00fcber hinaus wurde auch die Leistung der Autocompletion-Funktion verbessert, was zu einer insgesamt besseren Benutzererfahrung f\u00fchrt.<\/p>\n\n\n\n<p>Hier sind einige Zahlen, die den Vergleich zwischen TypeScript 4 und TypeScript 5 verdeutlichen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typ\u00fcberpr\u00fcfung: Die Typ\u00fcberpr\u00fcfung ist in TypeScript 5 bis zu 4-mal schneller als in TypeScript 4. In einem Benchmark-Test konnte TypeScript 5 eine 1000-zeilige TypeScript-Datei in weniger als einer Sekunde \u00fcberpr\u00fcfen, w\u00e4hrend TypeScript 4 daf\u00fcr mehr als 4 Sekunden ben\u00f6tigte.<\/li>\n\n\n\n<li>Kompilierungszeit: TypeScript 5 kann Dateien jetzt parallel verarbeiten, was die Kompilierungszeit bei gro\u00dfen Code-Basen um bis zu 80% reduziert. In einem Benchmark-Test konnte TypeScript 5 eine 5000-zeilige TypeScript-Datei in weniger als 3 Sekunden kompilieren, w\u00e4hrend TypeScript 4 daf\u00fcr mehr als 12 Sekunden ben\u00f6tigte.<\/li>\n\n\n\n<li>Generics: Die Generics-Implementierung ist in TypeScript 5 bis zu 5-mal schneller als in TypeScript 4. In einem Benchmark-Test konnte TypeScript 5 eine 1000-zeilige TypeScript-Datei mit Generics in weniger als einer Sekunde kompilieren, w\u00e4hrend TypeScript 4 daf\u00fcr mehr als 5 Sekunden ben\u00f6tigte.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p>TypeScript 5 bringt eine Reihe von Verbesserungen mit sich, die die Entwicklerproduktivit\u00e4t steigern und die Code-Qualit\u00e4t verbessern. Zu den wichtigsten Neuerungen geh\u00f6ren Type-First Development, statische Analyse, verbesserte Performance, smartere Autocomplete und neue Features f\u00fcr Enums.<\/p>\n\n\n\n<p>Durch die Einf\u00fchrung von Type-First Development wird der Entwicklungsprozess beschleunigt, indem die Typisierung von Anfang an in den Fokus gestellt wird. Die statische Analyse verbessert die Qualit\u00e4t des Codes, indem sie Fehler fr\u00fchzeitig aufdeckt. Die Performance-Optimierungen f\u00fchren zu einer schnelleren und effizienteren Ausf\u00fchrung des Codes. Die smartere Autocomplete-Funktion erleichtert die Entwicklung, indem sie Vorschl\u00e4ge f\u00fcr m\u00f6gliche Code-Snippets liefert. Und die neuen Features f\u00fcr Enums erweitern die M\u00f6glichkeiten der Verwendung von Enums in TypeScript.<\/p>\n\n\n\n<p>Insgesamt bietet TypeScript 5 eine verbesserte Entwicklererfahrung, indem es die Entwicklungszeit verk\u00fcrzt, die Code-Qualit\u00e4t erh\u00f6ht und die Effizienz des Codes verbessert.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typescript ist eine der beliebtesten Programmiersprachen der letzten Jahre. Mit jeder neuen Version bietet die Sprache verbesserte Features und Funktionen, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":618,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[121],"tags":[97,122,110,76],"class_list":["post-608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-clean-code","tag-news","tag-tests","tag-typescript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/mlmwwmq2k3up.i.optimole.com\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/i0.wp.com\/rising-bits.com\/wp-content\/uploads\/2023\/04\/IMG_0508.png?fit=2859%2C1734&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/comments?post=608"}],"version-history":[{"count":1,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/608\/revisions"}],"predecessor-version":[{"id":609,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/posts\/608\/revisions\/609"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/media\/618"}],"wp:attachment":[{"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/media?parent=608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/categories?post=608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rising-bits.com\/en\/wp-json\/wp\/v2\/tags?post=608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}