TypeScript vs. JavaScript: Verstehen Sie die Unterschiede

Das World Wide Web läuft grundsätzlich mit JavaScript, HTML und CSS. Leider fehlen in JavaScript einige Funktionen, mit denen Entwickler es für große Anwendungen verwenden können. Geben Sie TypeScript ein.

Was ist JavaScript?

JavaScript begann als Skriptsprache für den Netscape Navigator-Webbrowser. Brendan Eich schrieb den Prototyp 1995 über einen Zeitraum von 10 Tagen. Der Name JavaScript ist eine Anspielung auf die Java-Sprache von Sun Microsystem, obwohl die beiden Sprachen sehr unterschiedlich sind und die Ähnlichkeit der Namen im Laufe der Jahre zu erheblichen Verwirrungen geführt hat. JavaScript, das sich erheblich weiterentwickelt hat, wird jetzt von allen modernen Webbrowsern unterstützt.

Auf die Einführung von clientseitigem JavaScript in Netscape Navigator folgte schnell die Einführung von serverseitigem JavaScript auf den Webservern Netscape Enterprise Server und Microsoft IIS. Etwa 13 Jahre später führte Ryan Dahl Node.js als plattformübergreifende Open Source-JavaScript-Laufzeitumgebung ein, die von jedem Browser oder Webserver unabhängig ist.

JavaScript-Sprache

JavaScript ist eine Multi-Paradigmen-Sprache. Es hat eine Syntax mit geschweiften Klammern und Semikolons, wie die C-Sprachfamilie. Es hat eine schwache, dynamische Typisierung und wird entweder interpretiert oder (häufiger) just-in-time kompiliert. Im Allgemeinen ist JavaScript Single-Threaded, obwohl es eine Web Workers-API gibt, die Multithreading ausführt, und es gibt Ereignisse, asynchrone Funktionsaufrufe und Rückrufe.

JavaScript unterstützt die objektorientierte Programmierung mithilfe von Prototypen anstelle der in C ++, Java und C # verwendeten Klassenvererbung, obwohl classJavaScript ES6 2015 um eine Syntax erweitert wurde. JavaScript unterstützt auch die funktionale Programmierung, einschließlich Closures, Rekursion und Lambdas (anonyme Funktionen).

Vor JavaScript ES6 hatte die Sprache keine Tail-Call-Optimierung. Jetzt ist dies der Fall, obwohl Sie den strengen Modus ( 'use strict') aktivieren müssen, um ihn zu aktivieren, und die Implementierung variiert von Browser zu Browser. Der strikte Modus ändert auch die Semantik von JavaScript und einige normalerweise stille Fehler, um Fehler auszulösen.

Was ist mit der Bezeichnung „ES6“? Der Name für die standardisierte JavaScript-Sprache lautet ECMAScript (ES) nach dem ECMA International Standards Body. ES6 wird auch als ECMAScript 2015 (ES2015) bezeichnet. ES2020 ist derzeit ein Standardentwurf.

Als einfaches Beispiel, um Ihnen den Eindruck der JavaScript-Sprache zu vermitteln, finden Sie hier einen Code, mit dem Sie entscheiden können, ob es Tag oder Abend ist, und die entsprechende Begrüßung dynamisch in ein benanntes Webelement einfügen können, das sich im Dokumentobjekt des Browsers befindet:

var hour = new Date (). getHours ();

var Gruß;

if (Stunde <18) {

  Gruß = "Guten Tag";

} else {

  Gruß = "Guten Abend";

}}

document.getElementById ("Demo"). innerHTML = Begrüßung;

JavaScript-Ökosystem

Es gibt zahlreiche JavaScript-APIs. Einige werden vom Browser bereitgestellt, wie die documentAPI im oben gezeigten Code, andere von Dritten. Einige APIs gelten für die clientseitige Nutzung, einige für die serverseitige Nutzung, einige für die Desktop-Nutzung und einige für mehr als eine Umgebung.

Zu den Browser-APIs gehören das Dokumentobjektmodell (DOM) und das Browserobjektmodell (BOM), Geolocation, Canvas (Grafiken), WebGL (GPU-beschleunigte Grafiken), HTMLMediaElement (Audio und Video) und WebRTC (Echtzeitkommunikation).

APIs von Drittanbietern gibt es zuhauf. Einige sind Schnittstellen zu vollständigen Anwendungen wie Google Maps. Andere sind Dienstprogramme, die die Programmierung von JavaScript HTML5 und CSS vereinfachen, wie z. B. jQuery. Einige, wie Express, sind Anwendungsframeworks für bestimmte Zwecke. Für Express besteht der Zweck darin, Web- und mobile Anwendungsserver auf Node.js zu erstellen. Eine Reihe anderer Frameworks wurde auf Express aufgebaut. Im Jahr 2016 habe ich 22 JavaScript-Frameworks besprochen, um zu verstehen, was so etwas wie ein Zoo wird. Viele dieser Frameworks existieren noch in der einen oder anderen Form, aber einige sind auf der Strecke geblieben.

Es gibt viele weitere JavaScript-Module, über 300.000. Um dies zu bewältigen, verwenden wir Paketmanager wie npm, den Standardpaketmanager für Node.js.

Eine Alternative zu npm ist Yarn, das von Facebook stammt und den Vorteil deterministischer Installationen beansprucht. Ähnliche Tools sind Bower (von Twitter), das Front-End-Komponenten anstelle von Node-Modulen verwaltet. Ender, der sich npm's kleine Schwester nennt; und jspm, das ES-Module (den neueren ECMA-Standard für Module) anstelle von CommonJS-Modulen verwendet, dem älteren De-facto-Standard, der von npm unterstützt wird.

Webpack bündelt JavaScript-Module in statischen Assets für den Browser. Mit Browserify können Entwickler Module im Node.js-Stil schreiben, die zur Verwendung im Browser kompiliert werden. Grunt ist ein dateiorientierter JavaScript-Task-Runner, und gulp ist ein Streaming-Build-System und ein JavaScript-Task-Runner. Die Wahl zwischen Grunzen und Schlucken ist nicht entscheidend. Ich habe sowohl installiert als auch verwendet, je nachdem, was für ein bestimmtes Projekt eingerichtet wurde.

Um JavaScript-Code ohne Kompilierung zuverlässiger zu machen, verwenden wir Linters. Der Begriff stammt aus dem C-Language Lint Tool, einem Standard-Unix-Dienstprogramm. Zu den JavaScript-Lintern gehören JSLint, JSHint und ESLint. Sie können das Ausführen von Lintern nach Codeänderungen mithilfe eines Task Runners oder Ihrer IDE automatisieren. Auch hier ist die Auswahl unter den Lintern nicht eindeutig, und ich verwende die für ein bestimmtes Projekt eingerichtete.

In Bezug auf Editoren und IDEs habe ich 6 JavaScript-IDEs und 10 JavaScript-Editoren überprüft, zuletzt im Jahr 2019. Meine Hauptauswahl war Sublime Text (sehr schneller Editor), Visual Studio Code (konfigurierbarer Editor / IDE) und WebStorm (IDE).

Mit Transpilern können Sie einige andere Sprachen wie CoffeeScript oder TypeScript in JavaScript übersetzen und modernes JavaScript (wie ES2015-Code) in ein grundlegendes JavaScript übersetzen, das in (fast) jedem Browser ausgeführt wird. (Alle Wetten sind für frühere Versionen von Internet Explorer deaktiviert.) Der am häufigsten verwendete Transpiler für modernes JavaScript ist Babel.

Was ist TypeScript?

TypeScript ist eine typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird (ES3 oder höher; konfigurierbar). Der Open Source TypeScript-Befehlszeilencompiler kann als Node.js-Paket installiert werden. Die TypeScript-Unterstützung wird mit Visual Studio 2017 und Visual Studio 2019, Visual Studio Code und WebStorm geliefert und kann zu Sublime Text, Atom, Eclipse, Emacs und Vim hinzugefügt werden. Der TypeScript-Compiler / Transpiler tsc ist in TypeScript geschrieben.

TypeScript fügt JavaScript optionale Typen, Klassen und Module hinzu und unterstützt Tools für umfangreiche JavaScript-Anwendungen für jeden Browser, für jeden Host und für jedes Betriebssystem. Neben vielen anderen Erfolgen für TypeScript wurde das beliebte Angular-Framework in TypeScript überarbeitet.

Mithilfe von Typen können JavaScript-Entwickler bei der Entwicklung von JavaScript-Anwendungen hochproduktive Entwicklungstools und -praktiken wie statische Überprüfung und Code-Refactoring verwenden.

Typen sind optional, und durch Typinferenz können einige Typanmerkungen einen großen Unterschied zur statischen Überprüfung Ihres Codes bewirken. Mit Typen können Sie Schnittstellen zwischen Softwarekomponenten definieren und Einblicke in das Verhalten vorhandener JavaScript-Bibliotheken erhalten.

TypeScript bietet Unterstützung für die neuesten und sich weiterentwickelnden JavaScript-Funktionen, einschließlich der Funktionen von ECMAScript 2015 und künftiger Vorschläge wie asynchrone Funktionen und Dekoratoren, um robuste Komponenten zu erstellen.

TypeScript-Sprache

Die TypeScript-Sprache akzeptiert JavaScript als gültig, bietet jedoch die zusätzlichen Optionen für Typanmerkungen, Typprüfung zur Kompilierungszeit, Klassen und Module. All dies ist äußerst nützlich, wenn Sie versuchen, robuste Software zu erstellen. Normales JavaScript generiert Fehler nur zur Laufzeit und nur dann, wenn Ihr Programm zufällig einen fehlerhaften Pfad erreicht.

Das TypeScript-Tutorial in 5 Minuten macht die Vorteile deutlich. Der Ausgangspunkt ist reines JavaScript mit der Erweiterung .ts:

Funktionsgruß (Person) {

  return "Hallo" + Person;

}}

let user = "Jane User";

document.body.textContent = greeter (Benutzer);

Wenn Sie dies mit tsc kompilieren, wird eine identische Datei mit der Erweiterung .js erstellt.

Im Lernprogramm können Sie diesen Code schrittweise ändern, indem Sie eine Typanmerkung person:stringin die Funktionsdefinition einfügen , kompilieren, die Typprüfung durch den Compiler testen, eine Schnittstelle für einen personTyp hinzufügen und schließlich eine Klasse für hinzufügen Student. Der endgültige Code lautet:

Klasse Student {

    fullName: string;

    Konstruktor (public firstName: string, public middleInitial: string,

        öffentlicher Nachname: Zeichenfolge) {

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }}

}}

Schnittstelle Person {

    Vorname: Zeichenfolge;

    lastName: string;

}}

Funktionsgruß (Person: Person) {

    return "Hallo" + person.firstName + "" + person.lastName;

}}

let user = neuer Student ("Jane", "M.", "User");

document.body.textContent = greeter (Benutzer);

Wenn Sie dies kompilieren und sich das ausgegebene JavaScript ansehen, werden Sie feststellen, dass Klassen in TypeScript nur eine Abkürzung für dieselbe prototypbasierte Vererbung sind, die in einfachem JavaScript ES3 verwendet wird. Beachten Sie, dass die Eigenschaften person.firstNameund person.lastNamevom Compiler automatisch generiert werden, wenn er ihre publicAttribute im StudentKlassenkonstruktor sieht , und auch auf die PersonSchnittstelle übertragen werden. Einer der schönsten Vorteile von Typanmerkungen in TypeScript besteht darin, dass sie von den Tools wie Visual Studio Code erkannt werden:

Wenn der Code beim Bearbeiten in VS-Code fehlerhaft ist, werden auf der Registerkarte Probleme die Fehlermeldungen angezeigt, z. B. die folgenden, wenn Sie das Zeilenende mit der Instanziierung löschen Student:

Das Lernprogramm zum Migrieren von JavaScript enthält detaillierte Informationen zum Aktualisieren eines vorhandenen JavaScript-Projekts. Wenn Sie die Einrichtungsschritte überspringen, besteht der Kern der Methode darin, Ihre .js-Dateien einzeln in .ts umzubenennen. (Wenn Ihre Datei JSX verwendet, eine von React verwendete Erweiterung, müssen Sie sie in .tsx anstatt in .ts umbenennen.) Verschärfen Sie dann die Fehlerprüfung und beheben Sie die Fehler.

Unter anderem müssen Sie modulbasierte Anweisungen require()oder define()Anweisungen in TypeScript-Importanweisungen ändern und Deklarationsdateien für alle von Ihnen verwendeten Bibliotheksmodule hinzufügen. Sie sollten Ihre Modulexporte auch mit der TypeScript- exportAnweisung neu schreiben . TypeScript unterstützt CommonJS-Module wie Node.js.

Wenn Sie Fehler bezüglich der falschen Anzahl von Argumenten erhalten, können Sie TypeScript-Funktionsüberladungssignaturen schreiben. Das ist eine wichtige Funktion, die JavaScript fehlt. Schließlich sollten Sie Ihren eigenen Funktionen Typen hinzufügen und gegebenenfalls Schnittstellen oder Klassen verwenden.

Normalerweise müssen Sie keine eigenen Deklarationsdateien für gemeinfreie JavaScript-Bibliotheken schreiben. DefinitelyTyped ist ein Repository von Deklarationsdateien, auf die alle mit npm zugegriffen werden kann. Sie finden die Deklarationen auf der TypeSearch-Seite.

Sobald Sie alle Ihre JavaScript-Dateien in TypeScript konvertiert, die Typen verbessert und die Fehler beseitigt haben, verfügen Sie über eine wesentlich robustere Codebasis. Anstatt die von Testern oder Benutzern gemeldeten Laufzeitfehler ständig zu beheben, können Sie die häufigsten Fehler statisch erkennen.

Es lohnt sich zu sehen, wie Anders Hejlsberg über TypeScript spricht. Wie Sie von ihm hören werden, ist TypeScript JavaScript, das skaliert.