JavaScript ist immer noch eine der beliebtesten Programmiersprachen für die Softwareentwicklung heute. Wenn Sie mit JavaScript vertraut sind, ist es sehr wahrscheinlich, dass Sie auch von TypeScript gehört haben.
Um zu verstehen, was TypeScript ist und warum es entwickelt wurde, wollen wir uns kurz JavaScript anschauen, da beide Sprachen eng miteinander verwandt sind.
JavaScript ist eine dynamisch typisierte Programmiersprache, was bedeutet, dass es sich um eine sehr flexible Programmiersprache handelt, bei der die Variablentypen erst zur Laufzeit des Programms festgelegt werden. Daher müssen Entwickler beim Erstellen von Variablen keine Typen angeben. Viele Entwickler, insbesondere Neulinge, mögen diesen Aspekt, da das Erlernen und Schreiben von Code dadurch einfacher und schneller wird. Im Allgemeinen wird JavaScript versuchen, den geschriebenen Code auszuführen, unabhängig davon, was genau geschrieben wurde.
Hier ist zum Beispiel ein JavaScript-Code:
var random_variable;
var this_is_a_text = "true";
this_is_a_text = 3;
Sie können sehen, dass dieselbe Variable mit dem Namen "this_is_a_text" zuerst einen Text speichert und später eine Zahl. Darüber hinaus gibt es bei der Erstellung der Variablen keine Angabe, welchen Typ sie speichern sollen.
Das unterscheidet sich deutlich von anderen Programmiersprachen wie Java oder C++, die statisch typisierte Programmiersprachen sind. In diesen Sprachen müssen Sie den Typ von allem im Voraus definieren. Darüber hinaus werden vor der Ausführung des Programms viele Überprüfungen durchgeführt, um sicherzustellen, dass der von Ihnen geschriebene Code sinnvoll ist. Wenn ein Fehler gefunden wird, z.B. wenn versucht wird, eine Zahl in einer Variable zu speichern, die nur Text aufnehmen sollte, wird der Code nicht ausgeführt, bis das Problem behoben ist.
Diese "Überprüfungen", die von Programmiersprachen wie Java und C++ durchgeführt werden, sind vorteilhaft, da sie eine bessere Codequalität gewährleisten. Allerdings erfordert diese Anforderung der Programmiersprache auch, dass Programmierer ihre Code-Struktur sorgfältiger planen. Dies bedeutet oft, dass Entwickler mehr Zeit benötigen, um den Code zu schreiben, insbesondere zu Beginn, wenn sie eine neue Sprache erlernen.
Nun verstehen wir also, dass JavaScript eine dynamisch typisierte Programmiersprache ist, die Entwicklern viel Flexibilität bietet. Es ermöglicht das schnellere und einfachere Schreiben von Code, insbesondere für kurze Code-Snippets, die bestimmte Aufgaben lösen sollen. Viele Entwickler erkennen jedoch im Laufe der Zeit, dass diese Flexibilität zu einem erheblichen Problem werden kann, wenn die Codebasis und die Anzahl der beteiligten Entwickler im Projekt wachsen.
Das Skalierungsproblem mit JavaScript
Betrachten wir ein häufiges Szenario: Sie haben ein großes Entwicklungsteam, das an einer Anwendung mit Hunderten von voneinander abhängigen Dateien arbeitet. Jede Änderung an einer Datei könnte potenziell das Verhalten vieler anderer Dateien beeinflussen und die Anwendung möglicherweise zum Absturz bringen, wenn ein Fehler eingeführt wird.
Um sicherzustellen, dass neue Änderungen keine Fehler verursachen, schreiben Entwickler normalerweise automatisierte Tests, um zu überprüfen, ob der Code wie erwartet funktioniert. Sie verlassen sich auch auf Code-Reviews von anderen Entwicklern, um sicherzustellen, dass die Änderungen akzeptabel sind. Diese Praktiken sind grundlegend und tragen zur Stabilität der Codebasis bei, wenn sie groß ist und mehrere Entwickler involviert sind. Der Aufwand, um die Beziehungen zwischen all den abhängigen Dateien über Tests und Code-Reviews zu überprüfen, kann jedoch erheblich werden, wenn die Codebasis und das Entwicklungsteam wachsen.
Nun betrachten wir dasselbe Szenario, jedoch aus der Perspektive eines neuen Entwicklers, der gerade im Unternehmen angefangen hat. Ihnen wurde die Aufgabe zugewiesen, ein kleines Problem in einem bestimmten Teil der Codebasis zu lösen. Das Verstehen des Inhalts jeder Variable und der erwarteten Datenstruktur in verschiedenen Teilen des Codes kann jedoch zeitaufwendig sein. Es erfordert möglicherweise eine umfangreiche Codeanalyse und sogar das manuelle Ausführen der Anwendung, um etwas so Einfaches wie den Inhalt einer einzigen Variable zu erfassen.
Daher muss es in JavaScript einen besseren Weg geben, um den Code automatisch auf Korrektheit zu überprüfen und die Datenstruktur explizit zu machen, insbesondere für neue oder unerfahrene Entwickler.
Hier kommt TypeScript ins Spiel!
TypeScript
TypeScript ist eine Programmiersprache, die JavaScript ähnelt, aber als Übermenge von JavaScript betrachtet wird. Das bedeutet, dass TypeScript alle Hauptfunktionen von JavaScript umfasst und zusätzliche Funktionen einführt, die exklusiv für TypeScript sind. Daher ist jeder in JavaScript geschriebene Code auch gültiger TypeScript-Code, aber umgekehrt trifft das nicht unbedingt zu.
Der Hauptvorteil, den TypeScript gegenüber JavaScript bietet, besteht darin, dass explizite Typen für Variablen im Code hinzugefügt werden können. Wie auf ihrer Website definiert: TypeScript ist JavaScript mit einer Syntax für Typen.
In TypeScript kann ein Entwickler folgenden Code schreiben:
type MyType = {
name: string;
value: number;
}
var random_variable: MyType;
var this_is_a_text: string = "true";
this_is_a_text = 10;
TypeScript gibt einen Fehler aus und zeigt an, dass dies nicht möglich ist, da die Variable "this_is_a_text" nur Text und keine Zahlen speichern sollte.
Natürlich ist dies in unserem Beispiel offensichtlich, aber wenn mehrere Dateien mit vielen Abhängigkeiten beteiligt sind, ist es nicht so einfach zu erkennen. Zusätzlich helfen die TypeScript-Überprüfungen sehr gut dabei, Fehler zu finden, die durch einen großen Feind der Entwickler verursacht werden: Tippfehler. Betrachten Sie das von TypeScript bereitgestellte Beispiel:
const announcement = "Hello World!";
// Wie schnell können Sie die Tippfehler entdecken?
announcement.toLocaleLowercase();
announcement.toLocalLowerCase();
// Vermutlich wollten wir dies schreiben...
announcement.toLocaleLowerCase();
Ein kleiner Unterschied im Code, wie ein Kleinbuchstabe anstelle eines Großbuchstaben, kann leicht übersehen werden, kann aber dazu führen, dass der Code bei der Ausführung fehlschlägt. TypeScript kann solche Fehler erkennen und Warnungen für den Entwickler bereitstellen.
Vorteile von TypeScript
Nun, da du TypeScript in Aktion gesehen und verstanden hast, was es JavaScript hinzufügt, wollen wir uns die spezifischen Vorteile anschauen, die diese Technologien in großen Projekten bieten.
Verbesserte Lesbarkeit
Wie in den obigen praktischen Beispielen gezeigt, verbessert TypeScript das Verständnis des Codes, indem es Variablen explizit typisiert. Entwickler müssen den Code nicht ausführen oder mehrere Zeilen analysieren, um den möglichen Inhalt jeder Variablen oder die Struktur der Daten zu verstehen. Alles wird explizit neben dem Code beschrieben und ähnelt einer statisch typisierten Programmiersprache.
Mit verbesserter Lesbarkeit können Entwickler den Code selbstbewusster aktualisieren, ohne neue Fehler einzuführen. Darüber hinaus wird das Debuggen erleichtert, da die Quelle vorhandener Fehler effizienter identifiziert werden kann.
Skalierbarkeit und Stabilität
Durch automatische Typüberprüfungen und verbesserte Lesbarkeit trägt TypeScript zur Skalierbarkeit und Stabilität des Codes bei. Selbst in Projekten mit zahlreichen voneinander abhängigen Dateien stellt TypeScript sicher, dass neue Aktualisierungen die richtige Typisierung beibehalten. Dadurch können Entwickler nahtlos an verschiedenen Teilen des Systems arbeiten.
Zwei bemerkenswerte Beispiele, die auf der TypeScript-Website vorgestellt werden, sind Slack und Airbnb. Airbnb berichtete von einer 38%igen Reduzierung von Fehlern, die in ihren Code eingeführt wurden, nachdem sie TypeScript übernommen hatten.
Kompatibilität mit JavaScript
TypeScript ist hochkompatibel mit JavaScript. Dein gewöhnlicher JavaScript-Code bleibt ein gültiger TypeScript-Code, und jeder in TypeScript geschriebene Code wird vor der Ausführung in JavaScript umgewandelt, um Kompatibilität mit allen Browsern zu gewährleisten.
TypeScript kümmert sich um den Transformationsprozess und konvertiert den Code in gültiges JavaScript, das von Browsern ohne Probleme ausgeführt werden kann.
Darüber hinaus ermöglicht TypeScript durch diese Transformation die Nutzung der neuesten JavaScript-Versionen, ohne sich um die Browserkompatibilität kümmern zu müssen. TypeScript stellt sicher, dass der resultierende JavaScript-Code nur Funktionen enthält, die von den Zielbrowsern unterstützt werden. Für fortgeschrittene Benutzer besteht sogar die Möglichkeit, diesen Prozess für eine bessere Kontrolle zu konfigurieren.
Schrittweise Einführung
Dank der hervorragenden Kompatibilität zwischen TypeScript und JavaScript kann die Einführung von TypeScript schrittweise und inkrementell erfolgen. Du kannst damit beginnen, neue Dateien in TypeScript zu erstellen und gleichzeitig vorhandene Dateien in JavaScript zu belassen. Im Laufe der Zeit kann dein Team allmählich einzelne JavaScript-Dateien in TypeScript konvertieren, um die Features von TypeScript zu nutzen.
Es ist nicht erforderlich, dass dein Team die Anwendungsentwicklung anhält, um das gesamte System zu migrieren. TypeScript selbst empfiehlt einen schrittweisen Übergangsansatz.
Integration mit Frameworks
Da TypeScript immer beliebter wird, haben viele weit verbreitete Code-Editoren und Frameworks eine ausgezeichnete Integration mit TypeScript. Dies erhöht die Entwicklerproduktivität und verbessert die Programmierungseffizienz.
Code-Editoren wie VSCode (Visual Studio Code) bieten nativen TypeScript-Support oder bieten Plugins, die TypeScript nutzen. Diese Editoren können Variablentypen automatisch anzeigen, wenn man mit der Maus darüber schwebt, und TypeScript-Fehler in Echtzeit markieren, während der Code geschrieben wird.
Was TypeScript nicht ist
Jetzt, da wir verstehen, was TypeScript ist, ist es wichtig zu beachten, was es nicht ist. TypeScript ist eine Sprache, die Entwicklern hilft, besseren JavaScript-Code zu schreiben, hauptsächlich durch Hinzufügen von statischen Typen, die vor der Ausführung automatisch überprüft werden. Da TypeScript jedoch vor der Ausführung in JavaScript umgewandelt wird (da Browser nur JavaScript ausführen können), erfolgen während der Laufzeit keine Überprüfungen.
Beispielsweise kannst du in TypeScript-Code den erwarteten Datentyp, der von einem externen Dienst zurückgegeben wird, definieren, um Entwicklern dabei zu helfen, den Code besser zu verstehen und entsprechende Aktualisierungen vorzunehmen. Wenn der Dienst jedoch während der Codeausführung unerwartet unterschiedliche Daten zurückgibt, zum Beispiel aufgrund eines Updates auf ihrer Seite, werden keine Fehler gemeldet.
Typüberprüfungen in TypeScript erfolgen während der Entwicklung, um die Effizienz der Entwickler zu verbessern und Fehler zu minimieren. Aber TypeScript selbst wird letztendlich nicht ausgeführt. Daher erfolgen keine Überprüfungen während der Laufzeit. Der Code, der letztendlich ausgeführt wird, ist JavaScript.
Kosten der Verwendung von TypeScript
Wir haben die unglaublichen Vorteile von TypeScript hervorgehoben und warum du es für dein Projekt übernehmen möchtest. Aber welche Kosten sind damit verbunden, insbesondere bei der Umstellung eines bestehenden JavaScript-Projekts auf TypeScript?
Erlernen der Sprache
Die anfänglichen Kosten liegen darin, dein Team darin zu schulen, mit TypeScript zu arbeiten, wenn sie vorher keine Erfahrung haben. Glücklicherweise ist der Lernprozess wegen der engen Verwandtschaft von TypeScript mit JavaScript relativ gering. Es ist kein drastischer Wechsel für JavaScript-Entwickler, TypeScript zu verwenden. Außerdem kannst du TypeScript schrittweise einführen, indem du zunächst spezielle Kommentare zu deinem JavaScript-Code hinzufügst, bis du zur vollständigen TypeScript-Syntax übergehst.
Die erste Einführung
Sobald sich dein Team mit TypeScript wohler fühlt, besteht die nächste Kostenquelle darin, den gesamten Code auf die Verwendung der neuen Sprache umzustellen. Diese Kosten können bei großen und komplexen Anwendungen erheblich sein, da sie eine Änderung des gesamten Codebestands erfordern. Wie wir jedoch zuvor besprochen haben, sollte die Einführung von TypeScript schrittweise erfolgen. Obwohl die Kosten hoch sein können, können sie im Laufe der Zeit verteilt werden. Du kannst damit beginnen, eine Datei nach der anderen zu ändern und nach und nach von den Vorteilen der Sprache zu profitieren, ohne das Unternehmen mit den Kosten und Risiken einer vollständigen Aktualisierung des Codebestands zu belasten.
Overhead
Schließlich gibt es einen konstanten Kostenfaktor, der mit dem Vorhandensein von Typen im Code verbunden ist. Mit TypeScript müssen Entwickler sorgfältiger typisieren und das System vor der Entwicklung besser planen. Sie müssen auch Typanpassungen bei Aktualisierungen vornehmen, um Konsistenz und Funktionalität sicherzustellen. Das bedeutet naturgemäß einen zusätzlichen Aufwand. Früher mussten Entwickler nur den Code selbst ändern, jetzt müssen sie auch die involvierten Typen berücksichtigen.
Dieser zusätzliche Aufwand nimmt jedoch ab, je besser das Team mit TypeScript vertraut wird. Außerdem ist er im Vergleich zu den Kosteneinsparungen, die sich aus den Vorteilen von TypeScript ergeben, minimal. Mit einem stabileren Codebestand und weniger Fehlern in der Anwendung überwiegen die Kosteneinsparungen bei der Wartung bei weitem den zusätzlichen Aufwand.
Vorteile von TypeScript - Zusammenfassung
TypeScript ist zweifellos eine leistungsstarke Sprache, die die Skalierbarkeit, Lesbarkeit und Fehlerreduzierung in JavaScript-Projekten verbessert. Sie kann die Wartungskosten effektiv reduzieren und die Entwicklungserfahrung für JavaScript-Projekte verbessern, insbesondere für solche, die an Komplexität zunehmen und sich kontinuierlich weiterentwickeln. Die Beliebtheit und das Wachstum von TypeScript in der Softwareentwicklungsbranche machen es zu einer wertvollen Ressource, um JavaScript-Projekte zu erweitern und zu verbessern.
