TypeScript vs. JavaScript: Verstehen Sie die Unterschiede

Das World Wide Web läuft grundsätzlich auf JavaScript, HTML und CSS. Leider fehlen JavaScript einige Funktionen, die Entwicklern helfen würden, es für große Anwendungen zu verwenden. Geben Sie TypeScript ein.

Was ist JavaScript?

JavaScript begann als Skriptsprache für den Netscape Navigator Web-Browser; Brendan Eich schrieb den Prototyp über einen Zeitraum von 10 Tagen im Jahr 1995. 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.

JavaScript-Sprache

JavaScript ist eine Multiparadigmensprache. Es hat geschweifte Klammer Syntax und Semikolons, wie die C-Familie von Sprachen. 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 Worker-API gibt, die Multithreading ausführt, und es gibt Ereignisse, asynchrone Funktionsaufrufe und Rückrufe.

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

Vor JavaScript ES6 hatte die Sprache keine Tail-Call-Optimierung; jetzt tut es das, obwohl Sie den strikten 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 ändert einige normalerweise stille Fehler, um Fehler auszulösen.

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

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

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

JavaScript-Ökosystem

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

Browser-APIs umfassen das Document Object Model (DOM) und das Browser Object Model (BOM), Geolocation, Canvas (Grafik), WebGL (GPU-beschleunigte Grafik), 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 JavaScript HTML5 und CSS-Programmierung erleichtern, wie jQuery. Einige, wie Express, sind Anwendungsframeworks für bestimmte Zwecke; Für Express besteht der Zweck darin, Web- und mobile Anwendungsserver auf Knoten zu erstellen.js. Eine Reihe anderer Frameworks wurde auf Express aufgebaut. Im Jahr 2016 diskutierte ich 22 JavaScript-Frameworks, um zu verstehen, was zu einem Zoo wurde; Viele dieser Frameworks existieren immer noch in der einen oder anderen Form, aber einige sind auf der Strecke geblieben.

Es gibt viele weitere JavaScript-Module, über 300.000. Um damit umzugehen, 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 umfassen Bower (von Twitter), das Front-End-Komponenten anstelle von Knotenmodulen verwaltet; Ender, das sich npms 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 statische Assets für den Browser. Browserify ermöglicht es Entwicklern, Knoten zu schreiben.module im JS-Stil, die für die Verwendung im Browser kompiliert werden. Grunt ist ein dateiorientierter JavaScript-Task-Runner, und Gulp ist ein Streaming-Build-System und JavaScript-Task-Runner. Die Wahl zwischen Grunzen und Schlucken ist nicht entscheidend. Ich habe sowohl installiert als auch verwendet, was auch immer für ein bestimmtes Projekt eingerichtet wurde.

Um JavaScript-Code ohne Kompilierung zuverlässiger zu machen, verwenden wir Linters. Der Begriff stammt aus der C-Sprache lint-Tool, das ein Standard-Unix-Dienstprogramm war. JavaScript-Linter umfassen JSLint, JSHint und ESLint. Sie können das Ausführen von Linters nach Codeänderungen mithilfe eines Task-Runners oder Ihrer IDE automatisieren. Auch hier ist die Auswahl unter den Lintern nicht eindeutig, und ich verwende das, was für ein bestimmtes Projekt eingerichtet wurde.

Apropos Editoren und IDEs, ich habe 6 JavaScript-IDEs und 10 JavaScript-Editoren überprüft, zuletzt im Jahr 2019. Meine Top-Auswahl waren 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ühe Versionen von Internet Explorer deaktiviert.) Der gebräuchlichste Transpiler für modernes JavaScript ist Babel.

Was ist TypoSkript?

TypeScript ist eine typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird (ES3 oder höher; es ist konfigurierbar). Der Open-Source-TypeScript-Befehlszeilencompiler kann als Knoten installiert werden.js-Paket. TypeScript-Unterstützung kommt mit Visual Studio 2017 und Visual Studio 2019, Visual Studio Code und WebStorm 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, jeden Host und jedes Betriebssystem. Neben vielen anderen Gewinnen für TypeScript wurde das beliebte Angular-Framework in TypeScript überarbeitet.

Typen ermöglichen JavaScript-Entwicklern die Verwendung hochproduktiver Entwicklungstools und -praktiken wie statische Überprüfung und Code-Refactoring bei der Entwicklung von JavaScript-Anwendungen.

Typen sind optional, und die Typinferenz ermöglicht es einigen Typanmerkungen, einen großen Unterschied bei der statischen Überprüfung Ihres Codes zu machen. 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 entwickelnden JavaScript-Funktionen, einschließlich derjenigen aus ECMAScript 2015 und zukü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 Typanmerkungen, Typprüfung zur Kompilierungszeit, Klassen und Module. All dies ist enorm nützlich, wenn Sie versuchen, robuste Software zu erstellen. Einfaches JavaScript generiert Fehler nur zur Laufzeit und dann nur, wenn Ihr Programm zufällig einen Pfad mit Fehlern erreicht.

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

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

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

In diesem Lernprogramm ändern Sie diesen Code schrittweise, fügen der Funktionsdefinition eine Typanmerkung person:string hinzu, kompilieren, Testen der Typprüfung durch den Compiler, Hinzufügen einer Schnittstelle für einen person -Typ und schließlich Hinzufügen einer Klasse für Student. Der endgültige Code ist:

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

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.firstName und person.lastName automatisch vom Compiler generiert werden, wenn ihre public -Attribute im Student -Klassenkonstruktor angezeigt und auch auf die Person -Schnittstelle übertragen werden. Einer der schönsten Vorteile von Typanmerkungen in TypeScript besteht darin, dass sie von den Tools wie Visual Studio Code erkannt werden:

IDG

Wenn der Code beim Bearbeiten in VS Code Fehler enthält, werden die Fehlermeldungen auf der Registerkarte Probleme angezeigt, z. B. die folgenden, wenn Sie das Zeilenende mit der Instanziierung von Student löschen:

IDG

Im Lernprogramm Migration von JavaScript wird ausführlich beschrieben, wie ein vorhandenes JavaScript-Projekt aktualisiert wird. Überspringen der Setup-Schritte, Der Kern der Methode besteht darin, Ihre umzubenennen .js-Dateien zu .ts eins nach dem anderen. (Wenn Ihre Datei JSX verwendet, eine Erweiterung, die von React verwendet wird, müssen Sie sie umbenennen in .tsx statt .ts.) Dann verschärfen Sie die Fehlerprüfung und beheben Sie die Fehler.

Unter anderem müssen Sie modulbasierte 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 Anweisung TypeScript export neu schreiben. TypeScript unterstützt CommonJS-Module wie Node .js tut es.

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 können die Deklarationen über die TypeSearch-Seite finden.

Sobald Sie alle Ihre JavaScript-Dateien in TypeScript konvertiert, die Typen verbessert und die Fehler beseitigt haben, haben Sie eine viel 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, Anders Hejlsberg bei der Diskussion von TypeScript zuzusehen. Wie Sie von ihm hören werden, ist TypeScript JavaScript, das skaliert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.