Was ist TypeScript? Stark typisiertes JavaScript

Was ist TypeScript? TypeScript definiert

TypeScript ist eine Variation der beliebten JavaScript-Programmiersprache, die einige wichtige Funktionen hinzufügt, die für die Unternehmensentwicklung wichtig sind. Insbesondere ist TypeScript stark typisiert - das heißt, Variablen und andere Datenstrukturen können vom Programmierer als von einem bestimmten Typ deklariert werden, z. B. eine Zeichenfolge oder ein Boolescher Wert, und TypeScript überprüft die Gültigkeit ihrer Werte. Dies ist in JavaScript, das lose eingegeben wird, nicht möglich .

Die starke Typisierung von TypeScript ermöglicht eine Reihe von Funktionen, mit denen Entwickler effizienter arbeiten können, insbesondere bei großen Codebasen im Unternehmensmaßstab. TypeScript wird kompiliert und nicht wie JavaScript interpretiert. Dies bedeutet, dass Fehler vor der Ausführung abgefangen werden können. IDEs, die eine inkrementelle Hintergrundkompilierung durchführen, können solche Fehler während des Codierungsprozesses erkennen.

Trotz dieses entscheidenden Unterschieds zu JavaScript kann TypeScript immer noch überall dort ausgeführt werden, wo JavaScript ausgeführt werden kann. Dies liegt daran, dass TypeScript nicht zu einer ausführbaren Binärdatei kompiliert wird, sondern zu Standard-JavaScript. Lassen Sie uns eintauchen, um mehr zu erfahren.

TypeScript vs. JavaScript 

TypeScript ist eine Obermenge von JavaScript. Während jeder korrekte JavaScript-Code auch korrekter TypeScript-Code ist, verfügt TypeScript auch über Sprachfunktionen, die nicht Teil von JavaScript sind. Das bekannteste Merkmal von TypeScript - das TypeScript seinen Namen gegeben hat - ist, wie bereits erwähnt, eine starke Typisierung: Eine TypeScript-Variable ist einem Typ wie einer Zeichenfolge, einer Zahl oder einem Booleschen Wert zugeordnet, der dem Compiler mitteilt, welche Art von Daten vorliegen es kann halten. Darüber hinaus unterstützt TypeScript die Typinferenz und enthält einen Catch-All-Any-Typ. Dies bedeutet, dass Variablen ihre Typen nicht explizit vom Programmierer zugewiesen bekommen müssen. mehr dazu gleich. 

TypeScript ist auch für die objektorientierte Programmierung konzipiert - JavaScript nicht so sehr. Konzepte wie Vererbung und Zugriffskontrolle, die in JavaScript nicht intuitiv sind, lassen sich in TypeScript einfach implementieren. Darüber hinaus können Sie mit TypeScript Schnittstellen implementieren, ein weitgehend bedeutungsloses Konzept in der JavaScript-Welt.

Es gibt jedoch keine Funktionalität, die Sie in TypeScript codieren können, die Sie nicht auch in JavaScript codieren können. Dies liegt daran, dass TypeScript nicht im herkömmlichen Sinne kompiliert wird. So wird beispielsweise C ++ in eine ausführbare Binärdatei kompiliert, die auf der angegebenen Hardware ausgeführt werden kann. Stattdessen wird der Compiler Maschinenschrift Transcodierungen Maschinenschrift Code in funktionell äquivalenten JavaScript. Dieser Artikel von Sean Maxwell auf GitConnected enthält einige großartige Beispiele für objektorientierte TypeScript-Codefragmente und deren JavaScript-Entsprechungen. Das resultierende JavaScript kann dann überall dort ausgeführt werden, wo ein beliebiger JavaScript-Code ausgeführt werden kann, von einem Webbrowser bis zu einem mit Node.js ausgestatteten Server.

Wenn TypeScript letztendlich nur eine ausgefallene Möglichkeit ist, JavaScript-Code zu generieren, warum sollten Sie sich dann damit beschäftigen? Um diese Frage zu beantworten, müssen wir uns ansehen, woher TypeScript stammt und wofür es verwendet wird.

Wofür wird TypeScript verwendet?

TypeScript wurde 2012 als Open Source veröffentlicht, nachdem es in Microsoft entwickelt wurde. (Der Software-Riese bleibt der Verwalter und Hauptentwickler des Projekts.) Dieser ZDNet-Artikel aus dieser Zeit bietet einen interessanten Einblick in die Gründe dafür: „Es stellte sich heraus, dass eine der großen Motivationen die Erfahrung anderer Microsoft-Teams war, die versuchten, sich zu entwickeln und Microsoft-Produkte in JavaScript pflegen. “

Zu dieser Zeit versuchte Microsoft, Bing Maps als Konkurrent von Google Maps zu skalieren und Webversionen seiner Office-Suite anzubieten - und JavaScript war die primäre Entwicklungssprache für die Aufgaben. Im Wesentlichen fiel es den Entwicklern jedoch schwer, Apps im Maßstab der Flaggschiff-Angebote von Microsoft mit JavaScript zu schreiben. Deshalb haben sie TypeScript entwickelt, um das Erstellen von Anwendungen auf Unternehmensebene für die Ausführung in JavaScript-Umgebungen zu vereinfachen. Dies ist der Geist hinter dem Slogan für die Sprache auf der offiziellen TypeScript-Projektwebsite: "JavaScript, das skaliert".

Warum ist TypeScript für diese Art von Arbeit besser als Vanille-JavaScript? Nun, wir können für immer über die Vorzüge der objektorientierten Programmierung streiten, aber die Realität ist, dass viele Softwareentwickler, die an großen Unternehmensprojekten arbeiten, daran gewöhnt sind, und es hilft bei der Wiederverwendung von Code als Projektballon in der Größe. Sie sollten auch nicht vernachlässigen, inwieweit Tools die Entwicklerproduktivität steigern können. Wie bereits erwähnt, unterstützen die meisten Unternehmens-IDEs die inkrementelle Hintergrundkompilierung, die Fehler bei der Arbeit erkennen kann. (Solange Ihr Code syntaktisch korrekt ist, wird er immer noch transpiliert, aber das resultierende JavaScript funktioniert möglicherweise nicht richtig. Stellen Sie sich die Fehlerprüfung als Äquivalent zur Rechtschreibprüfung vor.) Diese IDEs können Ihnen auch dabei helfen, den Code zu überarbeiten, wenn Sie tief in Ihren Code eindringen Projekt.

Kurz gesagt, TypeScript wird verwendet, wenn Sie die Unternehmensfunktionen und -tools einer Sprache wie Java verwenden möchten, Ihr Code jedoch in einer JavaScript-Umgebung ausgeführt werden muss. Theoretisch könnten Sie das Standard-JavaScript schreiben, das der TypeScript-Compiler selbst generiert, aber es würde viel länger dauern und die Codebasis wäre für ein großes Team schwieriger zu verstehen und zu debuggen.

Oh, und TypeScript hat noch einen weiteren Trick im Ärmel: Sie können den Compiler so einstellen, dass er auf eine bestimmte JavaScript-Laufzeitumgebung, einen bestimmten Browser oder sogar eine bestimmte Sprachversion abzielt. Da jeder wohlgeformte JavaScript-Code auch TypeScript-Code ist, können Sie beispielsweise Code, der in die ECMAScript 2015-Spezifikation geschrieben wurde und eine Reihe neuer syntaktischer Funktionen enthält, in JavaScript-Code kompilieren, der mit älteren Versionen von kompatibel ist die Sprache.

Installieren Sie TypeScript

Bereit, mit TypeScript zu spielen? Die Installation der Sprache ist einfach. Wenn Sie Node.js bereits auf Ihrem Entwicklungscomputer verwenden, können Sie es mit NPM, dem Node.js-Paketmanager, installieren. Das offizielle TypeScript-Tutorial in 5 Minuten führt Sie durch den Vorgang.

TypeScript kann auch als Plug-In für die IDE Ihrer Wahl installiert werden. Dies bietet Ihnen die oben erwähnten Tooling-Vorteile und kümmert sich auch um das Kompilieren von TypeScript zu JavaScript. Da TypeScript von Microsoft entwickelt wurde, ist es nicht verwunderlich, dass für Visual Studio und Visual Studio Code hochwertige Plug-Ins verfügbar sind. Als Open-Source-Projekt wurde TypeScript jedoch überall angepasst, von Open-Source-IDEs wie Eclipse bis zu ehrwürdigen Texteditoren wie Vim. Das gesamte Projekt kann von GitHub aus durchsucht und heruntergeladen werden.

TypeScript-Syntax

Sobald TypeScript installiert wurde, können Sie mit dem Erkunden beginnen. Dies bedeutet, dass Sie die Grundlagen der TypeScript-Syntax verstehen. Da JavaScript die Grundlage von TypeScript ist, müssen Sie mit JavaScript vertraut sein, bevor Sie beginnen. Zweifellos werden Ihre Hauptinteressenpunkte die TypeScript-spezifischen Funktionen sein, die die Sprache einzigartig machen. Wir werden hier auf die Höhepunkte eingehen.

TypeScript-Typen

Offensichtlich ist das wichtigste syntaktische Merkmal in TypeScript das Typensystem. Die Sprache unterstützt eine Reihe grundlegender Typen:

  • Boolean: Ein einfacher wahr / falsch-Wert.
  • Zahl: In TypeScript wie in JavaScript sind alle Zahlen Gleitkommawerte - es gibt keine separate Ganzzahl. TypeScript unterstützt Dezimal-, Hexadezimal-, Binär- und Oktalliterale.
  • Zeichenfolge: Eine Zeichenfolge mit Textdaten. Sie können beim Festlegen der Daten einfache oder doppelte Anführungszeichen verwenden, um Ihre Zeichenfolge zu umgeben. Sie können auch backticks ( `) verwenden, um Zeichenfolgen mit mehreren Zeilen zu umgeben, und Sie können Ausdrücke mit der Syntax in eine Zeichenfolge einbetten ${ expr }.
  • Arrays und Tupel: Mit diesen Typen können Sie mehrere Werte in einer bestimmten Reihenfolge speichern. In einem Array haben die einzelnen Werte alle den gleichen Datentyp, während sie in einem Tupel heterogen sein können. Die TypeScript- forEach()Methode wird verwendet, um eine Funktion für jedes Element in einem Array aufzurufen.
  • Aufzählung: Wie der gleichnamige Typ in C # können Sie in einer TypeScript-Aufzählung einer Folge numerischer Werte von Menschen lesbare Namen zuweisen.
  • Beliebig: Dies ist ein Typ für eine Variable, bei dem Sie nicht unbedingt im Voraus wissen, mit welchem ​​Wert sie enden wird. Die Werte können beispielsweise aus Benutzereingaben oder einer Bibliothek eines Drittanbieters stammen.
  • Objekt: Dies ist der Typ, der alles darstellt, was kein primitiver Typ ist. Dies ist für die objektorientierte Natur von TypeScript von wesentlicher Bedeutung.

Es gibt zwei verschiedene Möglichkeiten, einer Variablen explizit einen Typ zuzuweisen. Die erste ist die Syntax der spitzen Klammern:

let someValue: any;

let strLength: number = (someValue) .length;

Und die zweite ist die asSyntax:

let someValue: any = "Dies ist eine Zeichenfolge";

let strLength: number = (someValue als Zeichenfolge) .length;

Diese Codefragmente, die der TypeScript-Dokumentation entnommen sind, sind funktional gleichwertig. Beide definieren someValueals Variable vom Typ anyund weisen "this is a string"als Wert zu, definieren dann strLengthals Zahl und weisen als Wert die Länge des Inhalts von zu someValue.

TypeScript-Typen können auch durch Inferenz festgelegt werden. Das heißt, wenn Sie einen Wert von x auf 7 setzen, ohne festzustellen, welcher Typ x ist, geht der Compiler davon aus, dass x eine Zahl sein sollte. Unter bestimmten Umständen kann der Compiler auf einen anyTyp schließen , obwohl Sie Kompilierungsflags verwenden können, um sicherzustellen, dass dies nicht der Fall ist.

Das TypeScript-Typsystem ist ziemlich umfangreich und geht über den Rahmen dieses Artikels hinaus. Es gibt eine Reihe von erweiterten und Dienstprogrammtypen. Dazu gehören Vereinigungstypen, mit denen Sie feststellen können, dass eine Variable einer von mehreren angegebenen Typen ist, und zugeordnete Typen, Typen, die Sie basierend auf einem vorhandenen Typ erstellen können, in denen Sie jede Eigenschaft des vorhandenen Typs in denselben transformieren Weg. Sie können beispielsweise einen Vereinigungstyp für eine Variable erstellen, die entweder eine Zahl oder ein Boolescher Wert sein soll, aber keine Zeichenfolge oder etwas anderes. Sie können auch einen zugeordneten Typ erstellen, der alle Elemente in einem Array schreibgeschützt setzt.

TypeScript-Schnittstelle

Wie die meisten objektorientierten Sprachen verfügt TypeScript über Schnittstellen, über die Benutzer ihre eigenen Typen definieren können. Schnittstellen legen die Eigenschaften eines Objekts sowie die diesen Eigenschaften zugeordneten Typen fest. TypeScript-Schnittstellen können optionale Eigenschaften haben. Weitere Informationen zur Syntax finden Sie in der TypeScript-Dokumentation.  

TypeScript-Generika

TypeScript teilt auch das Konzept der Generika mit objektorientierten Sprachen wie Java und C #. (Die entsprechende Funktion in C ++ wird als Vorlage bezeichnet.) In TypeScript können generische Komponenten über eine Vielzahl von Typen hinweg arbeiten und nicht nur über einen, je nachdem, wo im Code diese Komponenten aufgerufen werden. Hier ist ein sehr einfaches Beispiel aus der TypeScript-Dokumentation. Betrachten Sie zunächst diese Funktion, die ein Argument aufnimmt und es dann sofort zurückgibt:

Funktionsidentität (arg: any): any {

    return arg;

}}

Da die Funktion mit dem anyTyp definiert ist , akzeptiert sie ein Argument eines beliebigen Typs, den Sie darauf werfen möchten. Was jedoch zurückgegeben wird, ist vom anyTyp. Hier ist eine Version der Funktion, die Generika verwendet:

Funktionsidentität (arg: T): T {

    return arg;

}}

Dieser Code enthält die TypvariableT , die den Typ des eingehenden Arguments erfasst und für unsere spätere Verwendung speichert.

Generika bieten noch viel mehr. Dies ist der Schlüssel, um die Wiederverwendung von Code in großen Unternehmensprojekten zu ermöglichen. Weitere Informationen finden Sie in der TypeScript-Dokumentation.

TypeScript-Klasse 

In der objektorientierten Programmierung erben Klassen Funktionen und dienen wiederum als Bausteine ​​für Objekte. JavaScript verwendete traditionell keine Klassen, sondern stützte sich auf Funktionen und prototypbasierte Vererbung, aber das Konzept wurde der Sprache als Teil der ECMAScript 2015-Version des Standards hinzugefügt. Klassen waren bereits Teil von TypeScript, und jetzt verwendet TypeScript dieselbe Syntax wie JavaScript. Einer der Vorteile des TypeScript-Compilers besteht darin, dass er Code mit JavaScript-Klassen in alten JavaScript-Code umwandeln kann, der den Standards von vor 2015 entspricht.

TypeScript-Datum

Es gibt eine Reihe von Methoden und Objekten zum Abrufen und Einstellen von Datum und Uhrzeit in TypeScript, die größtenteils von JavaScript geerbt werden. JavaTPoint hat einen guten Überblick darüber, wie dies funktioniert.

TypeScript-Tutorial 

Bereit tiefer zu gehen? Machen Sie sich mit diesen TypeScript-Tutorials auf dem Laufenden:

  • TypeScript in 5 Minuten führt Sie durch den Installationsprozess von TypeScript, falls Sie dies noch nicht getan haben.
  • Dieses Tutorial zu Visual Studio Code zeigt, wie IDEs Ihre TypeScript-Entwicklungsproduktivität wirklich steigern.
  • TypeScript-Tutorial für Anfänger: Der fehlende Leitfaden ist eine wirklich gründliche Einführung, die auch dann nützlich ist, wenn Sie nur über eine relativ begrenzte JavaScript-Erfahrung verfügen.

Wenn Sie erfahren möchten, wie Sie TypeScript mit React verwenden, die von Facebook entwickelte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, lesen Sie die Verwendung von TypeScript mit React und Redux von Ross Bulat und den Abschnitt über React und Webpack in der TypeScript-Dokumentation. Viel Spaß beim Lernen!