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, an dem 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 machen und getippt. 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.
What is 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 einbinden. 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 keine expliziten Prü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 eingeben.
Features of 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
- 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 natürlich.
What is TypeScript?
Eine reale Anwendung hat viele Validierungen und dynamische Prüfungen. Für solche Anwendungen wird JavaScript-Code irgendwann schwer zu testen sein, hauptsächlich weil es keine Typprü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 getippt und hat einen Compiler, der sich beschwert, wenn Sie das nicht definieren tippe einer Variablen.
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 Knoten js).
npm install -g typescriptoder laden Sie es direkt von der offiziellen Seite herunter Microsoft-Downloadseite. Sie können auch die TS-Spielplatz um zu sehen, wie der Code von ts nach js transkompiliert wird.
Danach können Sie die Projekteinstellungen in . konfigurieren tsconfig.json und benutze irgendeinen IDE or Texteditor um TypeScript-Code zu schreiben und zu speichern als .ts.
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.
Es ist immer gut, wenn der Code eine Typanmerkung für Wartbarkeit und Benutzerfreundlichkeit hat:
var feeling: string = “happy”;Das ist es nicht!
TypeScript bietet viele weitere Funktionen, die das Leben eines Entwicklers erleichtern.
Features of 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 zusätzliche Funktionen sind variadische Tupeltypen, benutzerdefinierte JSX-Factorys, 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 clientseitige Anwendungen verwendet
- Plattform- und browserübergreifende Unterstützung
- Unterstützt alle JS-Bibliotheken und Erweiterungen
Why do we need TypeScript? (Advantages of TypeScript over 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.
Does that mean we don’t need JavaScript? (Disadvantages of TypeScript over 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 sind überflüssig. Mit JavaScript können Sie Ihr Skript einfach in HTML eingeben und es würde funktionieren. Es ist auch einfacher zu den Code debuggen wenn Sie den Browser einfach jedes Mal aktualisieren können, wenn Sie etwas ändern.
Head-to-head comparison
Nachdem wir nun die Funktionen und Vorteile von TypeScript und JavaScript verstanden haben, lassen Sie uns weitere Vergleiche durchgehen:
| Typoskript | JavaScript |
| Eine typisierte Sprache, die Kompilierungsfehler frühzeitig erkennt | 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 schwierig zu testen und zu debuggen, daher eignet sich JS für kleine Projekte |
| 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 geschrieben werden mit tag |
| Alle .ts-Dateien werden vor der Ausführung in .js-Dateien konvertiert; bekannt als Trans-Kompilierung | Entwickler können .js-Dateien direkt in HTML-Dateien zur Ausführung mit einschließen Schild. |
| Leistungsstark und intuitiv mit umfangreichen Funktionen wie Modulen, Generika, Schnittstellen | Geeignet für einfache Webanwendungen, die keine erweiterten Funktionen erfordern |
| Wird für serverseitige und clientseitige Skripterstellung verwendet | Einfach zu verwenden für clientseitiges Scripting, wird aber für serverseitiges Scripting schwer und komplex |
| Dauert wegen des Kompilierungsschritts die Ausführung | Keine Kompilierung erforderlich, daher schnellere Ausführung |
| Unterstützt sowohl statische als auch dynamische Eingabe | Unterstützt nur dynamisches Tippen |
| Wir können die Typanmerkung wie folgt angeben:
|
Typanmerkungen können nicht angegeben werden, da wir keine Typen definieren können. |
Fazit
Aus der Lernperspektive könnte JavaScript Ihre natürliche Wahl sein. Du öffnest eine Datei, tippst etwas hinein <script></script> Tags, speichern Sie es als HTML – Sie werden die Ergebnisse sehen! Sie können dann darauf aufbauen, um dynamischere Inhalte zu erstellen.
Wenn Sie an einer großen Anwendung arbeiten, können Sie mit JavaScript-Kenntnissen leicht zu TypeScript wechseln.
Aus Karriere- und Gehaltsgesichtspunkten jedoch, da TypeScript-Entwickler, werden Sie sowohl bei JS- als auch bei TS-Projekten flexibler und komfortabler sein – also definitiv ein besserer Gewinn auf dem Markt. Typischerweise werden TypeScript-Entwickler zwischen 110 und 147 US-Dollar bezahlt, während JS-Entwickler zwischen 63 und 118 US-Dollar pro Jahr verdienen.
