TypeScript für Anfänger, Teil 1 Erste Schritte

Beginnen wir dieses Tutorial mit der Frage: "Was ist TypeScript?" 

TypeScript ist eine typisierte JavaScript-Obermenge, die in einfaches JavaScript übersetzt wird. Analog dazu wäre, wenn JavaScript CSS wäre, TypeScript SCSS. 

Der gesamte gültige JavaScript-Code, den Sie schreiben, ist ebenfalls gültiger TypeScript-Code. Mit TypeScript können Sie jedoch die statische Typisierung und die neuesten Funktionen verwenden, die zu einfachem JavaScript kompiliert werden, das von allen Browsern unterstützt wird. Mit TypeScript soll das Problem der Skalierbarkeit von JavaScript gelöst werden. 

In diesem Lernprogramm werden Sie zunächst über die verschiedenen Features von TypeScript und darüber informiert, warum das Lernen eine gute Idee ist. In den restlichen Abschnitten dieses Artikels wird die Installation und Kompilierung von TypeScript sowie einige beliebte Texteditoren beschrieben, die Unterstützung für die TypeScript-Syntax und andere wichtige Funktionen bieten.

Warum lernen Sie TypeScript??

Wenn Sie TypeScript noch nie verwendet haben, fragen Sie sich vielleicht, warum Sie sich überhaupt darum kümmern sollten, wann es zu JavaScript kompiliert wird. 

Lassen Sie mich versichern, dass Sie nicht viel Zeit damit verbringen müssen, TypeScript zu lernen. Sowohl TypeScript als auch JavaScript haben eine sehr ähnliche Syntax, und Sie können Ihr einfach umbenennen .js Dateien zu .ts und beginnen Sie mit dem Schreiben von TypeScript-Code. Hier sind einige Funktionen, die Sie überzeugen sollten, mit TypeScript zu beginnen:

1. Im Gegensatz zu JavaScript, das dynamisch eingegeben wird, können Sie mit TypeScript statische Typisierung verwenden. Dieses Feature selbst macht den Code wartungsfreundlicher und verringert das Risiko von Fehlern, die möglicherweise aufgrund falscher Annahmen über den Typ bestimmter Variablen verursacht wurden. Als zusätzlichen Bonus kann TypeScript den Typ einer Variablen basierend auf ihrer Verwendung bestimmen, ohne dass Sie explizit einen Typ angeben. Sie sollten jedoch immer die Typen für eine Variable explizit angeben, um die Übersichtlichkeit zu verbessern.
2. Um ehrlich zu sein, wurde JavaScript nicht als umfangreiche Entwicklungssprache konzipiert. TypeScript fügt JavaScript alle diese fehlenden Funktionen hinzu, die es wirklich skalierbar machen. Mit der statischen Typisierung kann die von Ihnen verwendete IDE den von Ihnen geschriebenen Code jetzt besser verstehen. Dies gibt der IDE die Möglichkeit, Funktionen wie Code-Vervollständigung und sicheres Refactoring bereitzustellen. All dies führt zu einer besseren Entwicklungserfahrung.
3. Mit TypeScript können Sie auch die neuesten JavaScript-Funktionen in Ihrem Code verwenden, ohne sich um die Browserunterstützung kümmern zu müssen. Nachdem Sie den Code geschrieben haben, können Sie ihn einfach in altes JavaScript konvertieren, das von allen Browsern unterstützt wird.
4. Viele beliebte Frameworks wie Angular und Ionic verwenden jetzt TypeScript. Dies bedeutet, dass, wenn Sie sich in Zukunft für eines der Frameworks entscheiden, TypeScript jetzt lernen sollte.

Installation

Bevor Sie mit dem Schreiben von fantastischem TypeScript-Code beginnen, müssen Sie zuerst TypeScript installieren. Dies kann mit Hilfe von npm erfolgen. Wenn npm noch nicht installiert ist, müssen Sie zunächst npm installieren, bevor Sie TypeScript installieren. Um TypeScript zu installieren, müssen Sie das Terminal starten und den folgenden Befehl ausführen:

npm install -g typscript

Nach Abschluss der Installation können Sie die installierte TypeScript-Version überprüfen, indem Sie den Befehl ausführen tsc -v in Ihrem Terminal. Wenn alles ordnungsgemäß installiert wurde, wird die installierte TypeScript-Versionsnummer im Terminal angezeigt.

IDEs und Texteditoren mit Unterstützung von TypeScript

TypeScript wurde von Microsoft erstellt. Die Tatsache, dass Visual Studio die erste IDE war, die TypeScript unterstützt, sollte daher nicht überraschen. Sobald TypeScript an Popularität gewann, fügten immer mehr Editoren und IDEs Unterstützung für diese Sprache hinzu, entweder sofort oder über Plugins. Ein anderer, einfacher und Open-Source-Editor namens Visual Studio Code, der von Microsoft erstellt wurde, unterstützt TypeScript. In ähnlicher Weise bietet WebStorm auch eine sofortige Unterstützung für TypeScript.

Microsoft hat außerdem ein kostenloses Sublime TypeScript Plugin erstellt. NetBeans verfügt über ein TypeScript-Plugin, das eine Vielzahl von Funktionen für eine einfache Entwicklung bietet. Die Hervorhebung von Syntax ist in Vim und Notepad ++ mit Hilfe der Plugins typeScript-vim und notepadplus-typescript verfügbar. 

Eine vollständige Liste aller Texteditoren und IDEs, die TypeScript unterstützen, finden Sie in GitHub. Für die Beispiele in dieser Serie verwende ich Visual Studio Code, um den gesamten Code zu schreiben.

Kompilieren von TypeScript zu JavaScript

Angenommen, Sie haben einen TypScript-Code in a geschrieben .ts Datei. Browser können diesen Code nicht selbst ausführen. Sie müssen das TypeScript in einfaches JavaScript kompilieren, das von Browsern verstanden werden kann. 

Wenn Sie eine IDE verwenden, kann der Code in der IDE selbst zu JavaScript kompiliert werden. In Visual Studio können Sie beispielsweise den TypeScript-Code direkt in JavaScript kompilieren. Sie müssen ein erstellen tsconfig.json Datei, in der Sie alle Konfigurationsoptionen für das Kompilieren Ihrer TypeScript-Datei in JavaScript angeben. 

Der anfängerfreundlichste Ansatz, wenn Sie nicht an einem großen Projekt arbeiten, ist die Verwendung des Terminals. Zuerst müssen Sie zum Speicherort der TypeScript-Datei im Terminal wechseln und dann den folgenden Befehl ausführen.

tsc first.ts

Dadurch wird eine neue Datei mit dem Namen erstellt first.js am selben Ort. Denken Sie daran, wenn Sie bereits eine Datei namens hatten first.js, es würde überschrieben werden.

Wenn Sie alle Dateien im aktuellen Verzeichnis kompilieren möchten, können Sie dies mit Hilfe von Platzhaltern tun. Denken Sie daran, dass dies nicht rekursiv funktioniert.

tsc * .ts 

Schließlich können Sie nur bestimmte Dateien kompilieren, indem Sie deren Namen explizit in einer einzigen Zeile angeben. In solchen Fällen werden JavaScript-Dateien mit entsprechenden Dateinamen erstellt.

tsc first.ts product.ts bot.ts

Schauen wir uns das folgende Programm an, das in TypeScript zwei Zahlen multipliziert.

sei a: number = 12; sei b: Zahl = 17; function showProduct (first: number, second: number): void console.log ("Das Produkt ist:" + erste * Sekunde);  showProduct (a, b);

Der obige TypeScript-Code wird mit dem folgenden JavaScript-Code kompiliert, wenn die Zielversion auf ES6 eingestellt ist. Beachten Sie, dass alle Typinformationen, die Sie in TypeScript angegeben haben, nach der Kompilierung nicht mehr vorhanden sind. Mit anderen Worten, der Code wird zu JavaScript kompiliert, das vom Browser verstanden werden kann, aber Sie können die Entwicklung in einer viel besseren Umgebung durchführen, die Ihnen dabei helfen kann, viele Fehler zu finden.

sei a = 12; sei b = 17; Funktion showProduct (erster, zweiter) console.log ("Das Produkt ist:" + erste * Sekunde);  showProduct (a, b);

Im obigen Code haben wir den Typ der Variablen angegeben ein und b als Zahlen. Das bedeutet, wenn Sie später versuchen, den Wert von festzulegen b Bei einer Zeichenfolge wie "apple" zeigt TypeScript eine Fehlermeldung an, dass "apple" nicht dem Typ zugeordnet werden kann Nummer. Ihr Code wird immer noch in JavaScript kompiliert. Diese Fehlermeldung informiert Sie jedoch darüber, dass Sie einen Fehler gemacht haben, und hilft Ihnen, Probleme während der Laufzeit zu vermeiden. 

Hier ist ein Screenshot, der die Fehlermeldung in Visual Studio Code zeigt:

Das obige Beispiel zeigt, wie TypeScript Ihnen Hinweise zu möglichen Fehlern im Code gibt. Dies war ein sehr einfaches Beispiel, aber wenn Sie sehr große Programme erstellen, helfen Nachrichten wie diese bei der Erstellung robuster Code mit weniger Fehlerwahrscheinlichkeiten.

Abschließende Gedanken

Dieses Tutorial für den Einstieg in die Serie soll Ihnen einen kurzen Überblick über die verschiedenen TypeScript-Funktionen geben und Ihnen bei der Installation der Sprache sowie einigen Vorschlägen für IDEs und Texteditoren helfen, die Sie für die Entwicklung verwenden können. Im nächsten Abschnitt wurden verschiedene Möglichkeiten zum Kompilieren Ihres TypeScript-Codes in JavaScript beschrieben. Außerdem wurde erläutert, wie Sie mit TypeScript einige häufige Fehler vermeiden können.

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Wenn Sie Fragen haben, teilen Sie mir dies bitte in den Kommentaren mit. Im nächsten Lernprogramm der Serie werden verschiedene in TypeScript verfügbare Variablentypen erläutert.