So portieren Sie Ihr JavaScript-Programm auf TypeScript

JavaScript wurde ursprünglich 1995 nach einer erstaunlich kurzen Entwicklungszeit veröffentlicht und ist seitdem zu einem festen Bestandteil vieler Websites und Apps geworden. Heute hat JavaScript sowohl in client- als auch in serverseitigen Anwendungen ein Zuhause gefunden. Entwickler fordern immer noch viele Funktionen, trotz aller Änderungen, die es im Laufe der Jahre erfahren hat.

TypeScript ist eine Skriptsprache, die JavaScript um viele dieser lang erwarteten Funktionen erweitert. Typanmerkungen, benutzerdefiniertes Schreiben und Schnittstellen sind allesamt wichtige Komponenten, zusammen mit besseren Werkzeugen zur Steigerung der Produktivität.

Warum wechseln?

Die Aussicht, bei Großprojekten die Sprache zu wechseln, kann stressig sein. Zum Glück für alle, die sich mit dieser Aufgabe befassen, ist der Prozess der Portierung eines Projekts von JavaScript zu TypeScript recht einfach.

JavaScript hat sich in den letzten Jahren als wichtige Programmiersprache etabliert. Ursprünglich nur für Front-End-Scripting auf Websites verwendet, brachte die Veröffentlichung von Node.js JavaScript auf die Serverseite, was dazu beitrug, seine Popularität zu steigern.

Während JavaScript in letzter Zeit viel populärer geworden ist, gibt es viele Funktionen, die seiner neuesten Implementierung, ES6, noch fehlen. Für viele Entwickler schränken diese fehlenden Funktionen die Nützlichkeit von JavaScript als Sprache ein.

TypeScript zielt darauf ab, diese Bedenken auszuräumen, indem JavaScript mit zusätzlichen Funktionen verpackt und dann Benutzercode transpiliert wird. Das Ergebnis ist eine typsichere Sprache mit der Einfachheit und Benutzerfreundlichkeit von JavaScript.

Es gibt bereits mehrere Tools und Frameworks mit vollständiger TypeScript-Unterstützung. Angular verwendet es schon lange und sogar React hat Möglichkeiten, TypeScript zu implementieren.

TypeScript ist wie erweitertes JavaScript

TypeScript implementiert viele der Funktionen, die Entwickler häufig in JavaScript anfordern. TypeScript ist nach dem vollständigen Typsystem benannt, das es implementiert, einschließlich Funktionen wie Typprüfung, Sicherheit und impliziter Typisierung. TypeScript lässt Sie sogar benutzerdefinierte Namespaces definieren und verwenden.

TypeScript enthält auch Schnittstellen, Enumerationen und Typrückschlüsse. TypeScript unterstützt weiterhin Funktionen aus der neuesten JavaScript-Implementierung neben älteren Funktionen und fügt eine Reihe neuer Funktionen hinzu.

Insgesamt liegt der Fokus von TypeScript auf der Schaffung eines sichereren Entwicklungsprozesses mit stärkeren Tools zur Unterstützung von Programmierern.

Es fördert typsicheren Code

TypeScript verwendet ein integriertes Typprüfungssystem, um Variablentypen zu validieren. Es enthält eine Reihe von Standardtypen mit der Option, eigene Klassen und Typen zu definieren. Typen können explizit deklariert oder basierend auf der Zuweisung abgeleitet werden.

TypeScript verfügt über mehrere Standarddatentypen, darunter Zeichenfolgen, Zahlen, boolesche Werte und Tupel. Es gibt auch Variablentypen wie unknown und any, mit denen Sie schwach typisierten Code verwenden können.

Mit der Typinferenz von TypeScript können Sie Typprüfungen sogar für Standard-JavaScript-Code ausführen, indem Sie ihn durch den Transpiler von TypeScript laufen lassen.

Transpilation macht es einfach zu bedienen

Aus Entwicklersicht ist eines der besten Features von TypeScript, dass es Vanilla-JavaScript ausgibt. Sie können TypeScript-Code durch einen als Transpilation bezeichneten Prozess ausführen, der der Kompilierung ähnelt.

Das Ergebnis der Transpilation ist keine ausführbare Datei, sondern ein Skript in einer anderen Sprache als der ursprünglichen Sprache des Codes.

TypeScript-Code wird in JavaScript transpiliert, das Sie dann auf einem Server oder Client ausführen können. Auf diese Weise können Sie schnell und einfach Code schreiben, der auf nahezu jeder Plattform ausgeführt werden kann.

TypeScript unterstützt die Produktivität von Entwicklern

Das Hinzufügen von Typen zu JavaScript ermöglicht nicht nur die sichere Ausführung von Code, sondern stellt Entwicklern auch Tools zur Verfügung, die das Codieren vereinfachen. Die meisten modernen IDEs bieten TypeScript-Unterstützung, die es Codevervollständigungstools wie IntelliSense ermöglicht, zusätzlichen Kontext zum Code bereitzustellen. Es kann auch eine Typprüfung während des Schreibens anbieten, wodurch Sie Fehler schneller erkennen können.

Darüber hinaus wurden die zusätzlichen Datenstrukturen und die Syntax von TypeScript entwickelt, um die Lesbarkeit des Codes zu verbessern. Diese Funktionen machen es schneller und einfacher, qualitativ hochwertigen Code zu erstellen und potenzielle Probleme zu erkennen, bevor sie problematisch werden.

Wie können Sie Ihren Code portieren?

Wenn Sie ein brandneues Projekt starten, Erstellen eines neuen TypeScript-Projekts ist ganz einfach. Das Konvertieren eines bereits vorhandenen Projekts zu TypeScript ist jedoch etwas aufwändiger.

Unter den meisten normalen Umständen ist die Aussicht, ein Projekt von einer Sprache in eine andere umzuwandeln, beängstigend. Die Konvertierung von JavaScript zu TypeScript ist jedoch überraschend einfach.

TypeScript als Obermenge von JavaScript

TypeScript wird als Obermenge von JavaScript betrachtet. Das bedeutet, dass TypeScript zusätzliche Ebenen von Syntax und Funktionalität hinzufügt, ohne die Kernfunktionalität, auf der es aufbaut, zu ändern oder zu entfernen.

Für Entwickler bedeutet dies, dass jeder Code, der in JavaScript ordnungsgemäß ausgeführt wird, automatisch auch in TypeScript ordnungsgemäß ausgeführt wird. Unabhängig davon, ob es sich bei dem betreffenden Skript um einen Webserver handelt, der für die Ausführung in NodeJS geschrieben wurde, oder um eine Reihe von Front-End-Skripten für eine Webseite, der Wechsel ist außergewöhnlich einfach.

Nach der Installation des TypeScript-Transpilers können Sie eine simple tsconfig.json Datei mit folgendem Inhalt:

{
"CompilerOptionen": {
"outDir": "./bauen",
"allowJs": WAHR,
"Ziel": "es5"
 },
"enthalten": ["./src/**/*"]
}

Verschieben Sie alle zutreffenden Dateien in das src-Verzeichnis und führen Sie den Transpiler aus. Dadurch werden die resultierenden JavaScript-Dateien in der erstellt bauen Verzeichnis.

Diese schnellen und einfachen Änderungen konvertieren ein Standard-JavaScript-Projekt in ein TypeScript-Projekt. Von hier aus können Sie die neuen Funktionen, die TypeScript bietet, nach Belieben nutzen. Sie können Typen an Variablen annotieren, benutzerdefinierte Typen implementieren und Schnittstellen definieren.

Nach jeder Transpilation können Sie die Ausgabe von verwenden bauen Verzeichnis nach Bedarf, indem Sie die Dateien wie gewohnt zu einem beliebigen Projekt hinzufügen. Der Transpiler gibt Standard-JavaScript prüfen ein und konvertiert neue Funktionen in gültige ES5-Skripts.

Was Sie wissen müssen, um von JS zu TS zu wechseln

Der Prozess der Konvertierung eines Projekts von JavaScript zu TypeScript ist außergewöhnlich einfach. Das Konvertieren ist so einfach wie das Wechseln der Verzeichnisstruktur, das Hinzufügen einer Konfigurationsdatei und die Installation des Transpilers.

Es kann jedoch ein viel längeres Projekt sein, alle Vorteile aus der neuen Sprache herauszuholen. Während TypeScript den Typ jeder Variablen in einem Projekt ableiten kann, sollten diese explizit deklariert werden. Das Durchgehen und Hinzufügen benutzerdefinierter Typen zu einem Projekt, das Hinzufügen geeigneter Anmerkungen und das Erstellen von Schnittstellen kann zeitaufwändig sein.

Wenn Sie einem Projekt diese Funktionen hinzufügen, können Sie jedoch die Vorteile nutzen, die mit einer ordnungsgemäßen Typprüfung und erweiterten Werkzeugen einhergehen. Große Projekte lassen sich schneller und einfacher erstellen, Sie erkennen Fehler früher und neue Entwickler haben es leichter, Ihren Code zu lesen.