Warum Sie TypeScript gegenüber JavaScript wählen sollten

BY admin
|

TypeScript hat in den letzten Jahren an Popularität gewonnen. Es wird unter den fünf vielversprechendsten Sprachen im Jahr 2020 erwähnt. Angular, eines der größten Frontend-Frameworks, verwendet TypeScript. Etwa 60% der JS-Programmierer verwenden bereits TypeScript und 22% möchten es versuchen. Warum?

Historisch gesehen ist JavaScript die Hauptsprache für die Skripterstellung von Webseiten und Apps im Internet. Es ist jetzt möglich, JavaScript sowohl im Frontend als auch im Backend mit Frameworks wie Node zu verwenden.js und Deno.

Aber wurde JavaScript für die Erstellung großer, komplexer Systeme wie im modernen Web entwickelt? Nein.

In diesem Artikel stellen wir Ihnen eine Lösung dafür vor – TypeScript – und bringen Sie auf den Weg, Ihrem JavaScript-Code Typen hinzuzufügen.

Hier sind einige der Punkte, die wir behandeln werden:

  • Was ist TypeScript?
  • Was sind Typen und wie funktionieren sie in TS?
  • JavaScript vs. TypeScript: welches soll man wählen?
  • Erste Schritte mit TypeScript.
  • Weitere Ressourcen zum Studium von TypeScript.

Was ist TypoSkript?

Kurz gesagt, TypeScript ist eine Obermenge von JavaScript, die optional eingegeben und zu einfachem JavaScript kompiliert werden kann.

In einfacheren Worten, TypeScript ist technisch JavaScript mit statischer Typisierung, wann immer Sie es haben möchten.

Was wären nun die Gründe für das Hinzufügen von statischer Typisierung zu JavaScript?

Ich kann mindestens drei auflisten:

  • Sie können meisterhaft versteckte Ninja-Fehler wie den Klassiker vermeiden 'undefined' is not a function.
  • Es ist einfacher, Code umzugestalten, ohne ihn erheblich zu beschädigen.
  • Sich in komplexen, großen Systemen zu orientieren, ist kein Alptraum mehr.

Tatsächlich zeigt eine Studie, dass 15% aller JavaScript-Fehler durch TypeScript erkannt werden können.

Die Freiheit der dynamischen Typisierung führt häufig zu Fehlern, die nicht nur die Effizienz der Arbeit des Programmierers verringern, sondern auch die Entwicklung aufgrund der steigenden Kosten für das Hinzufügen neuer Codezeilen zum Stillstand bringen können.

Das Versagen von JavaScript, Dinge wie Typen und Kompilierungsfehlerprüfungen zu integrieren, macht es daher zu einer schlechten Wahl für serverseitigen Code in Unternehmen und großen Codebasen. Wie ihr Slogan sagt, ist TypeScript JavaScript, das skaliert.

Was muss ich lernen, um TypeScript zu verwenden?

TypeScript ist im Wesentlichen ein JS-Linter. Oder JS mit Dokumentation, die der Compiler verstehen kann.

Daher müssen Sie im Gegensatz zu anderen Sprachen wie CoffeeScript (das syntaktischen Zucker hinzufügt) oder PureScript (das überhaupt nicht wie JavaScript aussieht) nicht viel lernen, um mit dem Schreiben von TypeScript-Code zu beginnen.

Typen in TS sind optional, und jede JS-Datei ist eine gültige TypeScript-Datei. Während sich der Compiler beschwert, wenn Sie Tippfehler in Ihren Anfangsdateien haben, gibt er Ihnen eine JavaScript-Datei zurück, die wie zuvor funktioniert. Wo auch immer Sie sind, TypeScript wird Sie dort treffen, und es ist einfach, Ihre Fähigkeiten schrittweise aufzubauen.

Wird TypeScript im Frontend oder Backend verwendet?

TypeScript wird zu JavaScript kompiliert. Daher kann TS überall dort verwendet werden, wo JS verwendet werden kann: sowohl im Frontend als auch im Backend.

JavaScript ist die beliebteste Sprache, um Skripte für das Frontend von Apps und Webseiten zu implementieren. Somit kann TypeScript für den gleichen Zweck verwendet werden, glänzt jedoch in komplexen Unternehmensprojekten auf der Serverseite.

Bei Serokell ist der Großteil unseres Web-Frontends in TypeScript implementiert.

Was sind Typen und wie funktionieren sie in TS?

Kurze Einführung in Typen

Typen sind eine Möglichkeit, korrekte Programme von falschen zu unterscheiden, bevor wir sie ausführen, indem wir in unserem Code beschreiben, wie wir unsere Daten verwenden möchten. Sie können von einfachen Typen wie Number und String bis hin zu komplexen Strukturen variieren, die perfekt für unsere Problemdomäne modelliert sind.

Programmiersprachen lassen sich in zwei Kategorien einteilen: statisch typisiert oder dynamisch typisiert.

In Sprachen mit statischer Typisierung muss der Typ der Variablen zur Kompilierungszeit bekannt sein. Wenn wir eine Variable deklarieren, sollte dem Compiler bekannt (oder ableitbar) sein, ob es sich um eine Zahl, einen String oder einen Booleschen Wert handelt. Denken Sie an Java.

In Sprachen mit dynamischer Typisierung ist dies nicht unbedingt der Fall. Der Typ einer Variablen ist nur beim Ausführen des Programms bekannt. Denken Sie an Python.

TypeScript kann statische Typisierung unterstützen, während JavaScript dies nicht tut.

Aufgrund der statischen Typisierung von TypeScript:

  • undefinierte Variablen einführen (Hilfe zur Kompilierungszeit)
  • summiere zwei Zeichenfolgen mit Zahlen (wie „4“ + „20“ = „420“)
  • führen Sie Operationen an Dingen durch, die dies nicht zulassen, z. B. das Trimmen einer Zahl.

Mit statischen Typsystemen können Sie Ihre eigenen zusammengesetzten Typen erstellen. Dies ermöglicht es Ingenieuren, ihre Absichten detaillierter auszudrücken.

Explizite Typen machen Ihren Code auch selbstdokumentierend: sie stellen sicher, dass Ihre Variablen und Funktionen dem entsprechen, was beabsichtigt ist, und ermöglichen es dem Computer, sich an den umgebenden Kontext zu erinnern.

Typen von TypeScript

TypeScript hat eine Vielzahl von Grundtypen wie Boolean, Number, String, Array, Tupel usw. Einige davon gibt es in JS nicht; Sie können mehr über sie in der Dokumentation von TypeScript erfahren.

Zusätzlich zu diesen möchten wir hier einige andere Typen vorstellen, um die Expressivität von TS zu demonstrieren:

Beliebig & Unbekannt

Während any als Typ alles abdecken kann, was Sie möchten, ist unknown sein typsicheres Gegenstück.

Wann immer Sie dem Typsystem entkommen möchten, können Sie mit any eine beliebige JavaScript-Variable zuweisen. Es wird häufig verwendet, um eingehende Variablen (z. B. von APIs von Drittanbietern) zu modellieren, die noch nicht überprüft wurden und deren Typ unbekannt ist.

Unknown ist ähnlich wie any , aber Sie können keine Operationen an der Variablen ausführen, bevor sie explizit typgeprüft wird.

Leer

Void wird verwendet, wenn kein Wert zurückgegeben wird, z. B. als Rückgabetyp von Funktionen, die nichts zurückgeben.

Nie

Never ist der Rückgabetyp für etwas, das niemals auftreten sollte, wie eine Funktion, die eine Ausnahme auslöst.

Schnittpunkt & Gewerkschaftstypen

Mit diesen können Sie benutzerdefinierte Typen erstellen, die besser zu Ihrer Logik passen.

Schnittpunkttypen ermöglichen es Ihnen, mehrere Grundtypen in einem Typ zusammenzufassen. Sie können beispielsweise einen benutzerdefinierten Typ Person mit name: string und phone_number: number erstellen. Es ist gleichbedeutend mit sagen: Ich möchte, dass mein Typ dies und das ist.

Union-Typen Aktivieren Sie für Ihren Typ einen der mehreren Basistypen. Sie könnten beispielsweise eine Abfrage haben, die entweder result: string oder undefined zurückgibt. Es ist gleichbedeutend damit zu sagen: Ich möchte, dass mein Typ dies oder das ist.

Wenn Sie Typen als Leerzeichen betrachten, sind alle diese Typen schnell sinnvoll.

Typen in TypeScript können sowohl implizit als auch explizit sein. Wenn Sie Ihre Typen nicht explizit schreiben, verwendet der Compiler die Typinferenz, um die von Ihnen verwendeten Typen abzuleiten.

Sie explizit zu schreiben, bietet jedoch Vorteile, z. B. anderen Entwicklern zu helfen, Ihren Code zu lesen, und sicherzustellen, dass das, was Sie sehen, das ist, was der Compiler sieht.

TypoSkript vs. JavaScript

Es lohnt sich, pragmatisch zu sein. Schauen Sie sich diese Grafik an:

Aus dem Nichts ist TypeScript jetzt in der 7th Position in GitHub Pull Requests für Q1 2020, über PHP und C. (Quelle)

Eine wesentliche Ursache dafür ist die Unterstützung von TypeScript durch Unternehmen wie Microsoft (die es erstellt haben) und Google, es wird aus gutem Grund unterstützt.

3 Gründe, TypeScript gegenüber JavaScript zu wählen

1. TypoSkript ist zuverlässiger

Im Gegensatz zu JavaScript ist TypeScript-Code zuverlässiger und einfacher zu refaktorieren. Dies ermöglicht es Entwicklern, Fehler zu vermeiden und Umschreibungen viel einfacher durchzuführen.

Typen machen die meisten dummen Fehler ungültig, die sich in JavaScript-Codebasen einschleichen können, und erstellen eine schnelle Rückkopplungsschleife, um all die kleinen Fehler beim Schreiben von neuem Code und Refactoring zu beheben.

2. TypoSkript ist expliziter

Wenn wir Typen explizit machen, konzentrieren wir uns darauf, wie genau unser System aufgebaut ist und wie verschiedene Teile davon miteinander interagieren. In großen Systemen ist es wichtig, den Rest des Systems unter Berücksichtigung des Kontexts abstrahieren zu können. Typen ermöglichen uns das.

3. TypoSkript und JavaScript sind praktisch austauschbar, warum also nicht?

Da JavaScript eine Teilmenge von TypeScript ist, können Sie alle JavaScript-Bibliotheken und den gewünschten Code in Ihrem TypeScript-Code verwenden.

Die beliebtesten JavaScript-Bibliotheken haben 2020 Typen – Definitiv typisiert ist ein Repository mit Typen für viele verschiedene JavaScript-Bibliotheken, mit denen Sie Ihre Interaktionen mit ihnen typsicherer gestalten können.

Dies bedeutet, dass Sie TypeScript schrittweise in Ihre JavaScript-Codebasis übernehmen können, indem Sie zuerst Typen zu einzelnen Modulen hinzufügen und dann erweitern, um … das bekannte Universum zu konsumieren, denke ich.

Nachteile von TypeScript

Sie können nicht einfach ein JavaScript-Team oder ein JavaScript-Repository nehmen und sie sofort auf idiomatisches TypeScript umstellen. Es gibt Kompromisse, und im Voraus Zeit Opfer, die Sie machen müssen.

Während wir über die Einsparungen streiten können, die explizite Typen auf lange Sicht bringen, dauert es auf kurze Sicht länger, sie hinzuzufügen. Dies ist wohl keine große Sache, aber es ist ein Argument für JavaScript.

Daher sollten Sie TypeScript möglicherweise nicht für kleine Projekte und Prototypen für Ihren eigenen Gebrauch auswählen.

Tests vs. Typen

Um kurz auf die Diskussion von Testing vs. types einzugehen: Beide Dinge fangen verschiedene Klassen von Bugs ab, daher ist es sinnvoll, beides auf unparteiische Weise zu tun.

Sie können weiterhin sowohl Unit-Tests als auch fortgeschrittenere Techniken wie eigenschaftsbasiertes Testen mit TS verwenden, während Sie die Vorteile eines statischen Typsystems beibehalten.

Um es zusammenzufassen, hier ein kurzer Vergleich beider Sprachen:

TypoSkript JavaScript
TS ist eine objektorientierte Skriptsprache JS ist eine objektorientierte Skriptsprache
Abhängige Sprache (kompiliert zu JavaScript) Unabhängige Sprache (kann interpretiert und ausgeführt werden)
Kompilierte Sprache, kann nicht direkt in einem Browser ausgeführt werden Interpretierte Sprache, direkt in einem Webbrowser ausgeführt
Statisch typisierbar Dynamisch typisierbar
Besser strukturiert und prägnant Flexibler, da Sie nicht durch das Typensystem eingeschränkt sind
Hat ein .ts-Erweiterung Hat eine .js Erweiterung
Erstellt bei Microsoft von Anders Hejlsberg (Designer von C #) und gepflegt von Microsoft Erstellt von Brendan Eich (Netscape) und gepflegt von ECMA (European Computer Manufacturers Association).
Eine faire Wahl für komplexe Projekte Gut für kleine, einfache Projekte

TypeScript-Schnellstartanleitung

TypeScript Compiler

Um Ihren TS-Code zu kompilieren, müssen Sie tsc (kurz für TypeScript Compiler) installieren. Der einfachste Weg, dies zu tun, ist über das Terminal. Dies kann einfach über npm mit dem folgenden Befehl erfolgen:

npm install -g typescript

Wenn Sie TypeScript mit Visual Studio Code verwenden möchten, gibt es eine praktische Anleitung auf ihrer Website.

Sobald Sie tscinstalliert haben, können Sie Ihre Dateien mit tsc filename.ts kompilieren.

Migrieren Ihrer Dateien von JavaScript nach TypeScript

Angenommen, wir möchten die folgende JavaScript-Datei aufgrund eines seltsamen Verhaltens in TypeScript ändern:

function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

Gute Nachrichten. Jede JS-Datei ist technisch gesehen eine gültige TypeScript-Datei, sodass Sie einen guten Start haben – wechseln Sie einfach die Dateierweiterung zu .ts von .js.

TypeScript verfügt über Typinferenz, was bedeutet, dass einige der von Ihnen verwendeten Typen automatisch abgeleitet werden können, ohne dass Sie sie hinzufügen. In diesem Fall wird davon ausgegangen, dass die Funktion zwei Variablen vom Typ any summiert, was wahr ist, aber derzeit keinen großen Nutzen hat.

Wenn wir nur Zahlen summieren möchten, können wir my_sum eine Typensignatur hinzufügen, damit nur Zahlen akzeptiert werden.

function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

TypeScript liefert uns nun einen Fehler.

Argument of type 'string' is not assignable to parameter of type 'number'.

Gut, dass wir herausgefunden haben, wo der Fehler liegt. 🙂 Um solche Fehler weiter zu vermeiden, können Sie Variablen auch Typdefinitionen hinzufügen.

let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok.

TypeScript ist sehr flexibel in dem, was es tun kann und wie es Ihnen helfen kann. Ein weniger triviales Beispiel, wie Sie Ihre vorhandene JavaScript-Codebasis in TypeScript verschieben oder TypeScript verwenden, um Ihren JS-Code zu verbessern, finden Sie in diesem Handbuch.

Wie verwende ich TypeScript in einem Browser?

Um TypeScript in einem Browser auszuführen, muss es mit dem TypeScript Compiler (tsc) in JavaScript transpiliert werden. In diesem Fall erstellt tsc ein neues .js-Datei basierend auf der .ts-Code, den Sie auf beliebige Weise verwenden können, um eine JavaScript-Datei zu verwenden.

Ressourcen für weiteres Lernen

TypeScript Deep Dive

Diese kostenlose Webressource bietet alles, was Sie brauchen, um mit TypeScript zu beginnen, einschließlich detaillierterer Erklärungen zu den Abschnitten, die wir hier bereits behandelt haben.

Lernen Sie TypeScript von Grund auf neu!

Ein praktischer 3-stündiger Kurs, der alle grundlegenden Funktionen von TypeScript durchläuft, wie man damit mit einigen JS-Frameworks interagiert und wie man die Leistungsfähigkeit von TypeScript beim Schreiben von JavaScript nutzt.

Übung

Exercism ist die beste Ressource, um das Schreiben von Code in einer neuen Programmiersprache zu üben. Mentoren, die Sie zu idiomatischem Code führen, viele lustige Übungsaufgaben – an dieser Website gibt es nichts zu lieben.

Schlussfolgerungen

Insgesamt ist TypeScript ein großartiges Tool in Ihrem Toolset, auch wenn Sie es nicht in vollem Umfang nutzen. Es ist einfach, klein anzufangen und langsam zu wachsen, zu lernen und neue Funktionen hinzuzufügen. TypeScript ist pragmatisch und einladend für Anfänger, so dass Sie keine Angst haben müssen.

Ich hoffe, dieser Artikel wird Ihnen auf Ihrer TypeScript-Reise nützlich sein. Wenn Sie Hilfe benötigen oder Fragen haben, stellen Sie diese bitte in unseren sozialen Medien wie Twitter oder Facebook.