Eine Frage, die mir oft gestellt wird, lautet: Worin besteht der Unterschied zwischen JavaScript und TypeScript?
Lasst uns das gemeinsam herausfinden…
Seit deinen ersten Schritten in der Programmierung ist JavaScript (JS) ein fester Bestandteil deiner Frontend-Projekte. Wenn du bereits mit JS vertraut bist, kannst du dir TypeScript als JS mit zusätzlichen Funktionen vorstellen, die deine Anwendung strukturierter und typisierter gestalten. Microsoft hat TypeScript als Open-Source-Projekt entwickelt, um die JS-Entwicklung effizienter zu machen und Fehler bereits während der Kompilierung zu erkennen.
In diesem Beitrag beleuchten wir einige Schlüsselfunktionen von JavaScript und TypeScript und erörtern die Unterschiede zwischen diesen beiden Skriptsprachen.
Was ist JavaScript?
JavaScript wird hauptsächlich für clientseitiges Scripting verwendet. Du kannst ein Skript direkt in eine HTML-Seite einbetten oder eine separate Datei mit der Endung .js erstellen und diese dann in deine HTML-Datei einfügen. Ein typisches Anwendungsbeispiel ist die Validierung von Anmeldeseiten, bei der du eine Fehlermeldung erhältst, wenn Benutzername oder Passwort falsch sind.
Betrachten wir ein einfaches JS-Beispiel, das wir im Browser ausführen können:
Erstelle eine Datei namens example.html und füge folgenden Code ein:
<script> feeling = 'happy'; feeling = 23; </script>
Dieser einfache Code deklariert eine Variable und weist ihr den Wert „happy“ (ein String) zu. Anschließend weisen wir derselben Variable einen Wert eines anderen Datentyps zu (eine Zahl). JavaScript würde dies ohne Einwände akzeptieren und wir können den Code problemlos in jedem Browser ausführen. Nun holen wir den Wert des „Gefühls“ vom Benutzer:
Unser HTML-Code sieht nun so aus:
<input type = "textbox" id = "howyoufeel">
Und unser Skript sieht so aus:
feeling = document.getElementById("howyoufeel").value;
Ohne zusätzliche, explizite Prüfungen in unserem Skript würde JS jeden vom Benutzer eingegebenen Wert akzeptieren und weiterverarbeiten. Das bedeutet, dass der Benutzer alles Mögliche, wie „234“, „@.#$%“, usw. in die Gefühlsvariable eingeben könnte.
Eigenschaften von JavaScript
Aus dem vorherigen Beispiel können wir folgende Merkmale von JavaScript ableiten:
- Schwach typisierte Skriptsprache
- Wird sowohl für clientseitiges als auch serverseitiges (mit Node.js) Scripting verwendet
- Flexibel und dynamisch
- Wird von allen gängigen Browsern unterstützt
- Leichtgewichtig und interpretiert
Wenn du daran interessiert bist, JavaScript gründlich zu lernen, schau dir diesen Udemy-Kurs an.
Was ist TypeScript?
Eine echte, komplexe Anwendung erfordert umfangreiche Validierungen und dynamische Überprüfungen. Bei solchen Anwendungen kann das Testen von JavaScript-Code schwierig werden, insbesondere, da keine Typüberprüfung vorhanden ist. Es ist wichtig, die Eingaben von Benutzern bereits am Anfang korrekt zu erfassen. Hier kommt TypeScript ins Spiel.
TypeScript ist eine stark typisierte Sprache mit einem Compiler, der sich beschwert, wenn du den Datentyp einer Variablen nicht definierst.
Sowohl JavaScript als auch TypeScript entsprechen den ECMAScript-Spezifikationen für Skriptsprachen. TypeScript kann jeglichen JavaScript-Code ausführen und unterstützt alle seine Bibliotheken – daher wird es als eine Obermenge von JavaScript bezeichnet.
TypeScript Installation
Um unseren vorherigen Code in TypeScript auszuführen, müssen wir den TypeScript-Compiler mit dem npm-Paket installieren (vorausgesetzt Node.js ist installiert):
npm install -g typescript
Alternativ kannst du den Compiler direkt von der offiziellen Microsoft-Downloadseite herunterladen. Du kannst auch den TS-Spielplatz nutzen, um zu sehen, wie der TS-Code in JS umgewandelt wird.
Nach der Installation kannst du die Projekteinstellungen in einer tsconfig.json-Datei konfigurieren und eine beliebige IDE oder einen Texteditor verwenden, um TypeScript-Code zu schreiben und als .ts-Datei zu speichern.
Du kannst zwar immer noch ohne Angabe des Variablentyps auskommen, und TypeScript kann den Datentyp selbst ableiten. Du erhältst aber einen Fehler, wenn du der Variable einen anderen Typ zuweist als den zuerst verwendeten (in unserem Fall ein String) – bereits während der Kompilierung.
Es ist generell ratsam, den Code mit einer Typannotation zu versehen, um die Wartbarkeit und Übersichtlichkeit zu erhöhen:
var feeling: string = "happy";
Und das ist noch nicht alles!
TypeScript bietet zahlreiche weitere Funktionen, die das Leben eines Entwicklers erleichtern.
Eigenschaften von TypeScript
Typescript verfügt über einen großen Funktionsumfang und jede neue Version bringt weitere Verbesserungen mit sich, die die Entwicklung vereinfachen. Beispielsweise gibt es mit dem neuen Release (4.0) zusätzliche Funktionen wie variadische Tupeltypen, benutzerdefinierte JSX-Factories und das Ableiten von Klasseneigenschaften aus Konstruktoren usw. Einige typische Merkmale von TypeScript sind:
- Unterstützung für objektorientierte Programmierkonzepte wie Interfaces, Vererbung, Klassen und Generics
- Frühe Fehlererkennung während der Entwicklung
- IDE-Unterstützung mit Syntaxprüfung und Vorschlägen
- Einfacheres Debugging aufgrund der Typisierung
- Transkompilierung nach JavaScript
- Verwendung für sowohl serverseitige als auch clientseitige Anwendungen
- Plattform- und browserübergreifende Unterstützung
- Unterstützung aller JS-Bibliotheken und -Erweiterungen
Warum brauchen wir TypeScript? (Vorteile von TypeScript gegenüber JavaScript)
Microsoft entwickelte und verwendete TypeScript zwei Jahre lang für interne Projekte, bevor es 2012 veröffentlicht wurde. Sie erstellten eine typisierte Version von JavaScript, weil es einfacher war, Code für Unternehmensanwendungen auf Produktionsniveau zu testen. Du kannst zwar die dynamische Eingabefunktionen weiterhin verwenden, aber auch Variablen typisieren, wenn es notwendig ist.
Betrachten wir folgenden Code:
var mynum = //get from user;
addten(number){
return number + 10;
}
Wir erwarten, dass das Ergebnis immer eine Zahl ist. Aber was passiert, wenn der Benutzer „Schaf“ eingibt? Die Ausgabe wird „Schaf10“ sein – im Idealfall sollten wir dem Benutzer mitteilen, dass diese Operation nicht möglich ist!
Wenn Typinformationen verfügbar sind, werden Texteditoren und IDEs einfacher zu bedienen und Laufzeitfehler werden vermieden. Außerdem wird es einfacher, den Code zu einem späteren Zeitpunkt umzugestalten.
Brauchen wir dann kein JavaScript mehr? (Nachteile von TypeScript gegenüber JavaScript)
Du kannst dir TypeScript als eine Erweiterung von JavaScript vorstellen, aber sicherlich nicht als Ersatz.
Bei kleineren Codeblöcken kann TypeScript zu einem Overhead werden – Installation, Kompilierung und Transkompilierung werden unnötig. Mit JavaScript kannst du dein Skript einfach direkt in HTML einfügen und es wird sofort funktionieren. Es ist auch einfacher, den Code zu debuggen, wenn du den Browser einfach jedes Mal aktualisieren kannst, wenn du etwas änderst.
Direkter Vergleich
Nachdem wir nun die Funktionen und Vorteile von TypeScript und JavaScript verstanden haben, vergleichen wir sie noch einmal:
| TypeScript | JavaScript |
| Eine typisierte Sprache, die Kompilierungsfehler frühzeitig erkennt | Fehler können erst zur Laufzeit gefunden werden |
| Gut geeignet für große Projekte, da die Wartbarkeit und Lesbarkeit verbessert werden | Mit zunehmendem Code wird das Testen und Debuggen schwieriger, daher eignet sich JS besser für kleine Projekte |
| Obermenge von JS, d.h. Funktionen wie Objektorientierung, Typüberprüfung und mehr | Eine Skriptsprache, die die dynamische Erstellung von Webinhalten unterstützt |
| Erfordert eine Compiler-Installation und Konfiguration | Keine Installation notwendig; JS-Code kann direkt im Browser mit dem <script>-Tag geschrieben werden |
| Alle .ts-Dateien werden vor der Ausführung in .js-Dateien konvertiert; dieser Vorgang wird als Transkompilierung bezeichnet | Entwickler können .js-Dateien direkt in HTML-Dateien mit dem <src>-Tag einbinden |
| Leistungsstark und intuitiv mit umfangreichen Features wie Modulen, Generics und Interfaces | Geeignet für einfache Webanwendungen, die keine erweiterten Funktionen benötigen |
| Wird für serverseitiges und clientseitiges Scripting verwendet | Einfach für clientseitiges Scripting, aber schwerfällig und komplex für serverseitiges Scripting |
| Die Ausführung dauert aufgrund des Kompilierungsschritts etwas länger | Keine Kompilierung erforderlich, daher schnellere Ausführung |
| Unterstützt sowohl statische als auch dynamische Typisierung | Unterstützt nur dynamische Typisierung |
Wir können Typannotationen wie folgt angeben: var feeling: string = "happy"; |
Typannotationen sind nicht möglich, da wir keine Typen definieren können |
Fazit
Aus Lernperspektive könnte JavaScript deine erste Wahl sein. Du öffnest eine Datei, schreibst Code in <script></script>-Tags, speicherst sie als HTML – und du siehst die Ergebnisse! Dann kannst du darauf aufbauen, um dynamischere Inhalte zu erstellen.
Wenn du an einer umfangreichen Anwendung arbeitest, kannst du mit deinen JavaScript-Kenntnissen problemlos zu TypeScript wechseln.
Aus beruflicher Sicht und in Bezug auf das Gehalt bist du als TypeScript-Entwickler flexibler und sicherer im Umgang mit JS- als auch TS-Projekten – was deinen Marktwert deutlich erhöht. TypeScript-Entwickler verdienen typischerweise zwischen 110.000 und 147.000 US-Dollar, während JS-Entwickler zwischen 63.000 und 118.000 US-Dollar pro Jahr verdienen.