Typoskript vs. Javascript – Den Unterschied verstehen

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

Lass es uns herausfinden…

Seit 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 plus 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 werden wir einige wichtige Funktionen von JavaScript und TypeScript und die Unterschiede zwischen beiden Skriptsprachen besprechen.

Was ist JavaScript?

JavaScript wird für clientseitiges Skripting verwendet. Sie können ein Skript auf einer HTML-Seite erstellen oder eine Datei mit der Erweiterung .js erstellen und sie in Ihre HTML-Datei einfügen. 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 ohne Probleme in jedem Browser ausführen. Lassen Sie uns nun den Wert des Gefühls vom Benutzer erhalten:

Unser HTML wird wie folgt aussehen:

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

und das Skript wird sein:

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

Sofern wir keine expliziten Überprüfungen in das Skript einfügen, akzeptiert JS jeden Wert vom Benutzer und gibt ihn weiter. Sie können also alles wie 234, @.#$% usw. in die Gefühlsvariable einfügen.

  So installieren Sie ein Smart Lock

Funktionen von JavaScript

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

  • Schwach typisierte Skriptsprache
  • Wird für clientseitiges und serverseitiges (mit node.js) Skripting verwendet
  • Flexibel und dynamisch
  • Unterstützt von allen gängigen Browsern
  • Leicht und interpretiert

Wenn Sie daran interessiert sind, JavaScript zu beherrschen, dann schauen Sie sich das an Udemy-Kurs.

Was ist TypeScript?

Eine reale Anwendung wird viele Validierungen und dynamische Prüfungen haben. Für solche Anwendungen wird es irgendwann schwierig, JavaScript-Code zu testen, vor allem, weil es keine Typprüfung gibt. Während Sie Werte von Benutzern erhalten, 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 node js haben).

npm install -g typescript

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

Sobald dies erledigt ist, können Sie die Projekteinstellungen in tsconfig.json konfigurieren und eine beliebige IDE oder einen beliebigen Texteditor verwenden, um TypeScript-Code zu schreiben und als .ts zu speichern.

  Beheben Sie, dass Halo Infinite beim Start immer wieder abstürzt

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 ersten verwendeten Typ (in unserem Fall einen String) angeben – während der Kompilierung selbst.

Es ist immer gut, wenn der Code eine Typenanmerkung für die Wartbarkeit und Benutzerfreundlichkeit hat:

var feeling: string = “happy”;

Das ist es nicht!

TypeScript bietet viele weitere Funktionen, um das Leben eines Entwicklers einfacher zu machen.

Eigenschaften von TypeScript

Typescript verfügt über einen umfangreichen Funktionsumfang und jede Version enthält neue Funktionen, um die Entwicklung einfacher als zuvor zu machen. Zum Beispiel mit dem neuen Release (4.0), einige Zusatzfunktionen sind variadische Tupeltypen, benutzerdefinierte JSX-Factories, Klasseneigenschaftsrückschlüsse von Konstruktoren usw. Einige typische Merkmale 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 für 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 Unternehmensanwendungen auf Produktionsniveau zu testen. Sie können weiterhin die dynamischen Eingabefunktionen verwenden, aber auch die Variablen eingeben, wenn es 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 sheep10 – idealerweise müssen wir dem Benutzer mitteilen, dass diese Operation nicht möglich ist!

  So starten Sie ein Blog mit Google Blogger

Wenn Sie die Typinformationen verfügbar haben, werden die Texteditoren und IDEs außerdem handlicher zu verwenden und Laufzeitfehler zu vermeiden. 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 Codeblö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 durchführen:

Typoskript
JavaScript
Eine typisierte Sprache, die Kompilierungsfehler frühzeitig abfängt
Sie können Fehler während der Laufzeit herausfinden
Geeignet für große Projekte, da es die Wartbarkeit und Lesbarkeit des Codes verbessert
Wenn mehr Code hinzugefügt wird, wird es schwieriger zu testen und zu debuggen, daher ist JS für kleine Projekte geeignet
Obermenge von JS, dh Funktionen wie Objektorientierung, Typprüfung und mehr
Eine Skriptsprache, die die dynamische Erstellung von Webinhalten unterstützt
Erfordert Compiler-Installation und Konfigurations-Setup
Keine Installation erforderlich; JS-Code kann direkt in einem Browser mit dem -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 außerdem mit JavaScript-Kenntnissen problemlos auf TypeScript umsteigen.

Aus Karriere- und Gehaltssicht jedoch als TypeScript-Entwickler, werden Sie sowohl mit JS- als auch mit TS-Projekten flexibler und komfortabler – also definitiv eine bessere Bereicherung auf dem Markt. Typischerweise werden TypeScript-Entwicklern zwischen 110.000 und 147.000 US-Dollar bezahlt, während JS-Entwickler zwischen 63.000 und 118.000 US-Dollar pro Jahr verdienen.

x