Einführung
Die Programmiersprache TypeScript bietet Entwicklern viele Vorteile gegenüber JavaScript. TypeScript stellt zusätzliche Funktionen bereit, mit denen sich komplexere interaktive Anwendungen und Websites mit weniger Fehlern erstellen lassen.
TypeScript verfügt außerdem über ein großes Ökosystem an Entwicklertools, die Inline-Dokumentation und Live-Code-Review bieten, wodurch es einfacher wird, Codierungsfehler während der Arbeit zu erkennen.
Dieser Artikel erklärt, was TypeScript ist und wie es mit JavaScript zusammenhängt, und bietet Ressourcen, die Ihnen den Einstieg in die Entwicklung von Frontend- und Backend-Anwendungen erleichtern.
Was ist TypeScript?
TypeScript ist eine Programmiersprache, die JavaScript um zusätzliche Funktionen erweitert.
JavaScript war nie dafür gedacht, komplexe Frontend- und Backend-Anwendungen zu steuern. Es wurde ursprünglich entwickelt, um Webseiten einfache Interaktivität zu verleihen, beispielsweise um anklickbare Schaltflächen und animierte Dropdown-Menüs zu erstellen.
JavaScript erfreute sich jedoch zunehmender Beliebtheit bei Entwicklern, die darüber hinaus weitere Einsatzmöglichkeiten erkannten. Dies führte zu einigen Problemen: Die Sprache war zu fehlertolerant. Programmierfehler oder die falsche Verwendung von Funktionen, die später eine Anwendung zum Absturz brachten, waren leicht zu begehen, und JavaScript bot nicht die Funktionalität vieler anderer Sprachen. TypeScript wurde entwickelt, um diese Probleme zu beheben und gleichzeitig mit bestehenden JavaScript-Umgebungen kompatibel zu sein.
TypeScript ist eine statisch typisierte Sprache und eine Erweiterung von JavaScript, die auf der bestehenden Syntax und Funktionalität von JavaScript aufbaut. Das bedeutet, dass Sie JavaScript in Ihrem TypeScript-Code verwenden können, aber nicht TypeScript in Ihrem JavaScript-Code, da TypeScript-Code Funktionen und Syntax verwendet, die in JavaScript nicht verfügbar sind.
TypeScript muss zu JavaScript kompiliert werden, um in Webbrowsern und Umgebungen wie Node.js ausgeführt werden zu können (die Übersetzung in eine Low-Level-Sprache ist ein anderer Begriff). Der resultierende JavaScript-Code ist nicht zur direkten Bearbeitung vorgesehen.
Der Workflow für die Entwicklung von TypeScript-Anwendungen besteht darin, sie in TypeScript zu schreiben, zu JavaScript zu kompilieren und anschließend bereitzustellen. Dieser zusätzliche Schritt mag zwar unnötig kompliziert erscheinen, hat aber einen guten Grund: Wäre TypeScript eine völlig neue Sprache, würde man sie nicht in Betracht ziehen. Da sie jedoch JavaScript kompiliert und somit auf bestehenden Systemen ausgeführt werden kann, hat sie sich weit verbreitet.
Die Dateiendung für TypeScript ist .ts. Nachfolgend finden Sie eine Beispieldatei namens index.ts mit etwas grundlegendem TypeScript-Code:
let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();Beachten Sie, dass die Syntax zwar sehr ähnlich zu JavaScript ist, in diesem Beispiel aber eine Besonderheit erkennbar ist: Auf die Variable „message“ folgt ein Doppelpunkt (:), und ihr Typ – in diesem Fall TypeScript – erlaubt es uns anzugeben, dass die Nachricht eine Zeichenkette sein muss und keinen Wert eines anderen Typs annehmen kann.
Die wichtigsten Funktionen und Vorteile von TypeScript für Entwickler
TypeScript trägt diesen Namen, weil seine Hauptfunktion die Einführung von Typsicherheit in JavaScript ist. Im obigen Beispiel ist die Variable `message` vom Typ String, daher kann dort kein numerischer Wert oder ein anderer Typ verwendet werden. Dies mag einschränkend wirken, ist aber tatsächlich ein Vorteil für Entwickler.
Typsicherheit und Kompilierzeitprüfungen reduzieren Programmierfehler
Stellen Sie sich folgendes Szenario vor: Sie lesen Werte aus zwei HTML-Texteingabefeldern aus und möchten diese addieren. JavaScript interpretiert diese Werte als Zeichenketten (es handelt sich schließlich um ein Textfeld!). Das Ergebnis sieht dann so aus:
let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"Dieser Code läuft ohne Warnungen oder Fehler durch, und die Werte in den Textfeldern werden als Zeichenketten behandelt. Das bedeutet, dass sie nicht addiert, sondern verkettet werden, was zu dem unerwünschten Ergebnis «25» statt 7 führt. Wenn Sie ein Business-Tool entwickeln und einen Geldwert addieren möchten, kann dies sehr nachteilig sein – Sie berechnen Ihrem Kunden zu viel!
Dies zeigt, warum Typsicherheit wichtig ist. Im Folgenden wird der Typ der hinzugefügten Variablen durch Hinzufügen eines Typs angewendet:
let a: number = "2";
let b: number = "2";
console.log(a + b);Wenn Sie versuchen, diesen Code zu kompilieren und auszuführen, wird es nicht funktionieren – stattdessen erhalten Sie eine Fehlermeldung:
Der Typ 'string' kann nicht dem Typ 'number' zugewiesen werden.
Dies bedeutet, dass Sie fälschlicherweise versucht haben, einer numerischen Variable einen String-Wert zuzuweisen. Sie können dies korrigieren, beispielsweise indem Sie den String explizit in eine Zahl umwandeln. TypeScript erleichtert Ihren Benutzern das Debuggen Ihres Programms und erhöht die Zuverlässigkeit, indem es verhindert, dass Ihr Code bei Tippfehlern überhaupt kompiliert und ausgeführt wird.
Bei der Arbeit mit TypeScript müssen Sie den Typ einer Variable nicht explizit angeben (obwohl dies normalerweise ratsam wäre): Dank der Typinferenz können Sie Variablen deklarieren und verwenden, ohne einen Typ anzugeben. TypeScript leitet den Typ anhand des Werts und der Verwendung ab. Dies ist besonders nützlich, wenn Sie untypisierten JavaScript-Code in TypeScript-Projekte importieren.
Wenn Sie das selbst ausprobieren möchten, können Sie mit TypeScript Playground TypeScript-Code direkt in Ihrem Browser schreiben und testen, ohne ihn kompilieren zu müssen.
Benutzerdefinierte Typen, Klassen und Schnittstellen sorgen für konsistente Daten.
TypeScript erweitert die Unterstützung von JavaScript für die objektorientierte Programmierung um die Unterstützung eigener benutzerdefinierter Typen sowie um Verbesserungen an Klassen, Schnittstellen und Vererbung.
Durch das Erstellen eigener Objekttypen und Schnittstellen können Sie Ihre Daten in TypeScript modellieren und so sicherstellen, dass Ihre Daten korrekt verarbeitet und gespeichert werden.
Klassen und Vererbung ermöglichen sauberen Code und die Einhaltung des DRY-Prinzips, wodurch Ihre Codebasis wesentlich übersichtlicher bleibt als im herkömmlichen JavaScript.
Aufzählungen und Literaltypen erleichtern das Verständnis Ihres Codes.
Aufzählungen (Enums) machen Ihren Code lesbarer und komfortabler, indem sie Werte benennen, die sonst möglicherweise mehrdeutig wären.
Angenommen, Sie speichern den Status einer Bestellung in Ihrer Datenbank als numerischen Wert, um Speicherplatz zu sparen und die Suche zu beschleunigen. Anstatt «ausstehend», «bezahlt» und «versendet» könnten Sie diese Werte als die Zahlen 0, 1 und 2 speichern.
Der Nebeneffekt ist, dass Ihr Code unübersichtlich wird, da die Zahlen selbst nicht viel aussagen. Sie könnten vergessen, welche Zahl welcher Bedingung entspricht und die falsche verwenden. Enums bieten eine praktische Lösung:
enum OrderStatus {
pending,
paid,
shipped,
}In der obigen Liste hat “pending” den Wert 0 (Enumerationen beginnen, wie andere Indizes in der Programmierung, die Position der Elemente bei Null zu zählen), “paid” hat den Wert 1 und “sent” hat den Wert 2. Bei der Verwendung einer Enumeration greift man auf ihre Werte über ihren Namen zu, und der Indexwert wird zurückgegeben:
console.log(OrderStatus.paid); // Gibt 1 aus
Literale Typen und Unions weisen Variablen bestimmte Werte zu. Beispielsweise könnte eine Funktion nur den Wert "Katze" oder "Hund" erwarten:
function myFunction(pet: "cat" | "dog") {
console.log(pet);
}Wenn Ihr Code dieser Funktion andere Werte als “Katze” oder “Hund” übergibt, wird ein Fehler ausgelöst. Dies trägt dazu bei, dass während der Entwicklung mehr Probleme gefunden werden: Sie können Funktionen schreiben, die bestimmte Eingaben erwarten, da Sie wissen, dass Ihr Programm nicht kompiliert wird, wenn ein Fehler auftritt, der einen unerwarteten Wert an diese Funktion übergibt.
Wie man TypeScript installiert und den TypeScript-Compiler verwendet
TypeScript-Code muss in JavaScript kompiliert werden, damit er in Webbrowsern und Node.js ausgeführt werden kann. Dazu müssen Sie den TypeScript-Compiler installieren.
Sie können TypeScript global mit dem folgenden npm-Befehl installieren.
npm install -g typescript
Nach der Installation können Sie den tsc TypeScript-Kompilierungsbefehl von überall in Ihrem Terminal mit npx ausführen:
tsc index.ts
Der obige Befehl kompiliert die TypeScript-Datei index.ts und gibt eine kompilierte JavaScript-Datei mit dem Namen index.js aus.
Wie man ein Programm in TypeScript schreibt
TypeScript spielt seine Stärken beim Erstellen komplexer, mehrseitiger Anwendungen und Websites aus. Die meisten Entwickler nutzen es nicht für grundlegende Dinge wie das Hinzufügen von Interaktivität zu einzelnen Webseiten, sondern vielmehr für die Entwicklung großer Anwendungen mit React oder Angular.
Viele Entwickler verwenden Code-Editoren, die die TypeScript-Integration unterstützen, um Funktionen wie Codevervollständigung, Inline-Dokumentation und Fehlerhervorhebung nutzen zu können und so ihre Entwicklungs- und Debugging-Prozesse zu optimieren.
Kann ich meinen bestehenden JavaScript-Code verwenden?
Ja! TypeScript ist mit JavaScript kompatibel. Sie können Ihren alten JavaScript-Code importieren und weiterhin in Ihren TypeScript-Projekten verwenden und ihn im Laufe der Zeit anpassen, um neue TypeScript-Funktionen zu nutzen.
Schließen Sie die Entwicklung mit TypeScript für den Browser ab.
React ist eine Bibliothek, mit der Sie Benutzeroberflächen für Ihre Frontend-Anwendungen erstellen können. Sie bietet die Grundlage für wiederverwendbare Komponenten und macht Ihre Anwendungsentwicklung modular und einfach. Außerdem ermöglicht sie die Erstellung dynamischer Seiten, mit denen der Benutzer interagieren kann, indem er Inhalte ein- und ausblendet, verschiebt und deren Darstellung ändert. React-Anwendungen können in TypeScript geschrieben werden: Diese Kombination ist eine beliebte und leistungsstarke Werkzeugkette für Frontend-Entwickler.
Angular ist ein umfassendes Framework, das TypeScript zum Erstellen seiner Komponenten nutzt. Es geht über React hinaus: Neben Werkzeugen zur Entwicklung von Benutzeroberflächen bietet es auch ein Framework für vollständige Anwendungen. Der konzeptionelle Ansatz von Angular ermöglicht es Entwicklern, schneller zu entwickeln, vorausgesetzt, das Konzept ihrer Anwendung passt zur Angular-Architektur.
Sowohl React als auch Angular eignen sich zur Entwicklung von TypeScript-Anwendungen für Ionic und Electron. Mit Ionic lassen sich mobile Apps für iOS und Android mithilfe von TypeScript erstellen, und Electron ermöglicht die Einbettung von Webanwendungen in Desktop-Anwendungen für Windows, Linux und macOS.
Bereitstellung von TypeScript-Backends auf dem Server
TypeScript beschränkt sich nicht auf die Entwicklung von Frontend-Anwendungen. Es kann auch zusammen mit Node.js zur Entwicklung von Backend-Diensten und Kommandozeilenanwendungen verwendet werden.
Alternativ können Sie TypeScript auch mit dem Fastify-Webframework verwenden oder ein TypeScript-spezifisches Framework wie Nest nutzen, um typsichere APIs zu erstellen.
TypeScript und GraphQL
GraphQL ist eine Abfragesprache zum Suchen und Abrufen von Daten aus APIs. Wie TypeScript ist sie typisiert und liefert daher strukturierte und konsistente Daten. Durch die Verwendung von Diensten, die GraphQL unterstützen, zur Implementierung in Ihren Backends und die Anpassung der Datentypen an Ihren TypeScript-Code können Sie die Qualität Ihrer Anwendungen erheblich verbessern. So stellen Sie sicher, dass alle in Ihren Backend-Diensten modellierten Daten korrekt in Ihren Frontends abgebildet werden und dass alle im Frontend erfassten Daten beim Hochladen korrekt gespeichert werden.
Wenn Sie Contentful zur Verwaltung Ihrer zusammensetzbaren Inhalte verwenden, haben unsere Community-Mitglieder Apps und Tools entwickelt, die Ihnen dabei helfen, Typdeklarationen für Ihre Inhaltstypen zu generieren und TypeScript mit Ihrem Inhaltsmodell zu synchronisieren.
