Den Unterschied zwischen Typescript und JavaScript verstehen

Eine der häufig gestellten Fragen, die ich erhalte, lautet: Was ist der Unterschied zwischen JavaScript und Typescript?

Lass es uns herausfinden…

Von dem Zeitpunkt an, als Sie mit dem Programmieren begonnen haben, war JavaScript (JS) Teil all Ihrer Front-End-Projekte. Wenn Sie mit JS ein wenig vertraut sind, stellen Sie sich TypeScript als JS und einige zusätzliche Funktionen vor, die Ihre Anwendung übersichtlicher und typisierter machen . Das typeScript wurde als Open-Source-Projekt von Microsoft entwickelt, um die JS-Entwicklung effizienter zu gestalten und Kompilierungsfehler frühzeitig abzufangen.

In diesem Artikel besprechen wir einige wichtige Funktionen von JavaScript und TypeScript und die Unterschiede zwischen beiden Skriptsprachen.

Was ist JavaScript?

JavaScript wird für clientseitiges Scripting verwendet. Sie können ein Skript auf einer HTML-Seite erstellen oder eine Datei mit der Erweiterung .js erstellen und in Ihre HTML-Datei einschließen. Ein gängiges Beispiel aus der Praxis, bei dem Sie JavaScript sehen können, ist die Validierung der Anmeldeseite, bei der Ihnen ein Fehler angezeigt wird, wenn Ihr Benutzername/Passwort falsch ist.

Lassen Sie uns einen einfachen JS-Code schreiben und im Browser ausführen:

Erstellen Sie eine Datei example.html und fügen Sie den folgenden Code hinzu:

 <script> feeling = 'happy'; feeling = 23; </script>

Dieser einfache Code deklariert eine Variable und weist ihr den Wert happy (string) zu. Wir können derselben Variablen einen Wert eines anderen Typs (Zahl) zuweisen. JavaScript würde sich nicht darüber beschweren und wir können den Code problemlos in jedem Browser ausführen. Lassen Sie uns nun den Wert des Gefühls vom Benutzer ermitteln:

Unser HTML sieht so aus:

 <input type = "textbox" id = "howyoufeel">

und das Skript wird sein:

 feeling = document.getElementById("howyoufeel").value;

Sofern wir das Skript nicht explizit überprüfen, akzeptiert JS jeden Wert des Benutzers und gibt ihn weiter. Sie können also alles wie 234, @.#$% usw. in die Gefühlsvariable eingeben.

Funktionen von JavaScript

Aus dem Obigen können wir die folgenden Funktionen von JavaScript beobachten:

• Schwach typisierte Skriptsprache
• Wird für clientseitige und serverseitige (mit node.js) Skripterstellung verwendet
• Flexibel und dynamisch
• Von allen gängigen Browsern unterstützt
• Leicht und interpretiert

Wenn du daran interessiert bist, JavaScript zu beherrschen, dann schau dir diesen Udemy-Kurs an.

Was ist TypeScript?

Eine reale Anwendung wird viele Validierungen und dynamische Prüfungen haben. Für solche Anwendungen wird JavaScript-Code irgendwann schwer zu testen sein, hauptsächlich weil es keine Typüberprüfung gibt. Beim Erhalten von Werten von Benutzern ist es wichtig, sie gleich zu Beginn selbst zu erhalten. Hier setzt TypeScript an.

TypeScript ist stark typisiert und hat einen Compiler, der sich beschwert, wenn Sie den Typ einer Variablen nicht definieren.

Sowohl JavaScript als auch TypeScript entsprechen den ECMAScript-Spezifikationen für eine Skriptsprache. Typescript kann den gesamten JavaScript-Code ausführen und unterstützt alle seine Bibliotheken – deshalb wird es als 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 (wenn Sie den Knoten js haben).

 npm install -g typescript

oder laden Sie es direkt von der offiziellen Microsoft-Downloadseite herunter. Sie können auch den TS-Playground verwenden, um zu sehen, wie der Code von ts nach js transkompiliert wird.

tsconfig.json können Sie die Projekteinstellungen in tsconfig.json und mit einer beliebigen IDE oder einem beliebigen Texteditor TypeScript-Code schreiben und als .ts speichern.

Sie können immer noch davonkommen, indem Sie den Variablentyp nicht definieren, und TypeScript kann den Datentyp ableiten. Sie erhalten jedoch einen Gefühlsfehler, wenn Sie etwas anderes als den zuerst verwendeten Typ (in unserem Fall einen String) angeben – während der Kompilierung selbst.

Aus Gründen der Wartbarkeit und Benutzerfreundlichkeit ist es immer gut, wenn der Code eine Typanmerkung enthält:

 var feeling: string = “happy”;

Das ist es nicht!

TypeScript bietet viele weitere Funktionen, die das Leben eines Entwicklers erleichtern.

Funktionen von TypeScript

Typescript verfügt über einen umfangreichen Funktionsumfang und jede Version enthält neue Funktionen, die die Entwicklung einfacher als zuvor machen. In der neuen Version (4.0) sind beispielsweise einige zusätzliche Funktionen variadische Tupeltypen, benutzerdefinierte JSX-Factorys, Klasseneigenschaftsrückschlüsse von Konstruktoren usw. Einige typische Funktionen von TypeScript sind:

• Unterstützt objektorientierte Programmierkonzepte wie Schnittstelle, Vererbung, Klasse. Generika
• Fehler frühzeitig erkennen
• IDE-Unterstützung mit Syntaxprüfung und Vorschlägen
• Einfacher zu debuggen, da es eingegeben wird
• Transkompiliert in JavaScript
• Wird sowohl für serverseitige als auch clientseitige Anwendungen verwendet
• Plattform- und browserübergreifende Unterstützung
• Unterstützt alle JS-Bibliotheken und -Erweiterungen

Warum brauchen wir TypeScript? (Vorteile von TypeScript gegenüber JavaScript)

Microsoft entwickelte und verwendete TypeScript zwei Jahre lang für seine internen Projekte, bevor es 2012 veröffentlicht wurde. Sie erstellten ein typisiertes JavaScript, weil es einfacher war, den Code für produktionstaugliche Unternehmensanwendungen zu testen. Sie können weiterhin die dynamischen Eingabefunktionen verwenden, aber auch die Variablen eingeben, wenn dies wirklich erforderlich ist.

Betrachten Sie den folgenden Code:

 var mynum = //get from user; addten(number){ return number + 10; }

Wir würden erwarten, dass das Ergebnis immer eine Zahl ist. Aber was ist, wenn ein Benutzer „Schafe“ gibt? Die Ausgabe ist Schaf10 – idealerweise müssen wir dem Benutzer mitteilen, dass dieser Vorgang nicht möglich ist!

Wenn Ihnen die Typinformationen zur Verfügung stehen, können die Texteditoren und IDEs außerdem einfacher verwendet und Laufzeitfehler vermieden werden. Es ist auch einfacher, den Code zu einem späteren Zeitpunkt umzugestalten.

Heißt das, wir brauchen kein JavaScript? (Nachteile von TypeScript gegenüber JavaScript)

Sie können sich TypeScript als eine Erweiterung von JavaScript vorstellen, aber sicherlich nicht als Ersatz.

Bei kleineren Codestücken kann TypeScript zu einem Overhead werden – Installation, Kompilierung und Transkompilierung werden überflüssig. Mit JavaScript können Sie Ihr Skript einfach in HTML eingeben und es würde funktionieren. Es ist auch einfacher, den Code zu debuggen, wenn Sie den Browser einfach jedes Mal aktualisieren können, wenn Sie etwas ändern.

Kopf-an-Kopf-Vergleich

Nachdem wir nun die Funktionen und Vorteile von TypeScript und JavaScript verstanden haben, lassen Sie uns weitere Vergleiche durchgehen:

Fazit

Aus Lernperspektive könnte JavaScript Ihre natürliche Wahl sein. Sie öffnen eine Datei, geben etwas in die <script></script> -Tags ein, speichern sie als HTML – Sie werden die Ergebnisse sehen! Sie können dann darauf aufbauen, um dynamischere Inhalte zu erstellen.

Wenn Sie an einer umfangreichen Anwendung arbeiten, können Sie mit JavaScript-Kenntnissen leicht zu TypeScript wechseln.

Aus Karriere- und Gehaltsgesichtspunkten werden Sie als TypeScript-Entwickler jedoch flexibler und komfortabler mit JS- und TS-Projekten – also definitiv ein besserer Vorteil auf dem Markt. Typischerweise werden TypeScript-Entwickler zwischen 110.000 und 147.000 US-Dollar bezahlt, während JS-Entwickler zwischen 63.000 und 118.000 US-Dollar pro Jahr verdienen.