Was ist TypeScript und warum sollte ich es anstelle von JavaScript verwenden?
Können Sie bitte beschreiben, was die TypeScript-Sprache ist?
Was kann sie, was JavaScript oder verfügbare Bibliotheken nicht können, was mir einen Grund geben würde, sie in Betracht zu ziehen?
1630
3
1000ft view...
[TypeScript][1] ist eine Obermenge von JavaScript, die vor allem optionale statische Typisierung, Klassen und Schnittstellen bietet. Einer der großen Vorteile besteht darin, dass IDEs eine reichhaltigere Umgebung für die Erkennung von häufigen Fehlern *während der Eingabe des Codes* bereitstellen können.Um eine Vorstellung davon zu bekommen, was ich meine, sehen Sie sich Microsofts Einführungsvideo zu dieser Sprache an.
Für ein großes JavaScript-Projekt könnte die Einführung von TypeScript zu einer robusteren Software führen, die dennoch dort eingesetzt werden kann, wo eine normale JavaScript-Anwendung ausgeführt werden würde.
Die Sprache ist quelloffen, aber Sie erhalten die clevere Intellisense-Funktion während der Eingabe nur, wenn Sie eine unterstützte IDE verwenden. Ursprünglich war dies nur Microsofts Visual Studio (auch im Blogbeitrag von Miguel de Icaza erwähnt). Heutzutage bieten auch andere IDEs TypeScript-Unterstützung.
Gibt es andere ähnliche Technologien?
Es gibt [CoffeeScript][5], aber das dient wirklich einem anderen Zweck. IMHO bietet CoffeeScript Lesbarkeit für Menschen, aber TypeScript bietet auch tiefe Lesbarkeit für *Werkzeuge* durch seine optionale statische Typisierung (siehe diesen [aktuellen Blogbeitrag][6] für ein wenig mehr Kritik). Es gibt auch [Dart][7], aber das ist ein vollwertiger Ersatz für JavaScript (obwohl es [JavaScript-Code erzeugen kann][8])Beispiel
Als Beispiel hier etwas TypeScript (Sie können damit auf dem TypeScript Playground spielen)
Und hier ist das JavaScript, das es erzeugen würde
Beachten Sie, wie TypeScript den Typ von Mitgliedsvariablen und Parametern von Klassenmethoden definiert. Dies wird bei der Übersetzung in JavaScript entfernt, aber von der IDE und dem Compiler verwendet, um Fehler zu erkennen, wie die Übergabe eines numerischen Typs an den Konstruktor.
Es ist auch in der Lage, Typen abzuleiten, die nicht explizit deklariert sind, z. B. würde es feststellen, dass die Methode
Greet()
einen String zurückgibt.Typescript debuggen
Viele Browser und IDEs bieten direkte Debugging-Unterstützung durch Sourcecemaps. Siehe diese Stack Overflow Frage für weitere Details: [Debugging von TypeScript-Code mit Visual Studio][10]Wollen Sie mehr wissen?
Ich habe diese Antwort ursprünglich geschrieben, als Typescript noch brandaktuell war. In [Lodewijks Antwort][11] auf diese Frage finden Sie weitere aktuelle Details.Die Beziehung von TypeScript zu JavaScript
Während der Build-Konferenz 2016 gab Anders Hejlsberg, Mitentwickler von TypeScript, eine detaillierte Erklärung und Demonstration dieser Funktion: Video (von 44:30 bis 56:30).
Kompilierung
Um TypeScript zu verwenden, benötigen Sie einen Build-Prozess, um JavaScript-Code zu kompilieren. Der Build-Prozess dauert im Allgemeinen nur ein paar Sekunden, was natürlich von der Größe Ihres Projekts abhängt. Der TypeScript-Compiler unterstützt die inkrementelle Kompilierung (
--watch
Compiler-Flag), so dass alle nachfolgenden Änderungen mit höherer Geschwindigkeit kompiliert werden können. Der TypeScript-Compiler kann Source-Map-Informationen in die generierten .js-Dateien einbinden oder separate .map-Dateien erstellen. Source-Map-Informationen können von Debugging-Programmen wie den Chrome DevTools und anderen IDEs verwendet werden, um die Zeilen im JavaScript mit den Zeilen zu verknüpfen, die sie im TypeScript erzeugt haben. Dadurch können Sie Haltepunkte setzen und Variablen während der Laufzeit direkt in Ihrem TypeScript-Code überprüfen. Source-Map-Informationen funktionieren ziemlich gut, es gab sie schon lange vor TypeScript, aber das Debugging von TypeScript ist im Allgemeinen nicht so gut wie bei der direkten Verwendung von JavaScript. Nehmen Sie zum Beispiel das Schlüsselwortthis
. Aufgrund der geänderten Semantik desthis
-Schlüsselworts im Zusammenhang mit Closures seit ES2015 kannthis
während der Laufzeit tatsächlich als Variable namens_this
existieren (siehe diese Antwort). Das kann beim Debuggen verwirren, ist aber in der Regel kein Problem, wenn man es weiß oder den JavaScript-Code inspiziert. Es ist anzumerken, dass Babel unter genau demselben Problem leidet. Es gibt noch ein paar andere Tricks, die der TypeScript-Compiler beherrscht, wie z.B. das Generieren von Abfangcode auf der Basis von decorators, das Generieren von Modulladecode für verschiedene Modulsysteme und das Parsen von JSX. Wahrscheinlich werden Sie jedoch neben dem Typescript-Compiler noch ein weiteres Build-Tool benötigen. Wenn Sie zum Beispiel Ihren Code komprimieren wollen, müssen Sie Ihrem Build-Prozess weitere Tools hinzufügen, um dies zu tun. Es gibt TypeScript-Kompilierungs-Plugins für Webpack, Gulp, Grunt und so ziemlich jedes andere JavaScript-Build-Tool, das es gibt. Die TypeScript-Dokumentation hat einen Abschnitt über Integration mit Build-Tools, der sie alle abdeckt. Ein Linter ist ebenfalls verfügbar, falls Sie noch mehr Build-Zeitkontrolle wünschen. Es gibt auch eine große Anzahl von Startprojekten, die Ihnen den Einstieg in TypeScript in Kombination mit einer Reihe anderer Technologien wie Angular 2, React, Ember, SystemJS, Webpack, Gulp usw. ermöglichen.JavaScript-Interoperabilität
Da TypeScript so eng mit JavaScript verwandt ist, bietet es großartige Interoperabilitätsmöglichkeiten, aber es ist etwas zusätzliche Arbeit erforderlich, um mit JavaScript-Bibliotheken in TypeScript zu arbeiten. TypeScript-Definitionen werden benötigt, damit der TypeScript-Compiler versteht, dass Funktionsaufrufe wie
_.groupBy
oderangular.copy
oder$.fadeOut
nicht tatsächlich illegale Anweisungen sind. Die Definitionen für diese Funktionen werden in.d.ts
-Dateien abgelegt. Die einfachste Form einer Definition besteht darin, dass ein Bezeichner in beliebiger Weise verwendet werden kann. Wenn Sie zum Beispiel Lodash verwenden, können Sie mit einer einzeiligen Definitionsdateideclare var _ : any
jede beliebige Funktion für_
aufrufen, aber natürlich können Sie dabei auch Fehler machen: __.foobar()` wäre ein legaler TypeScript-Aufruf, ist aber natürlich zur Laufzeit ein illegaler Aufruf. Wenn Sie korrekte Typunterstützung und Code-Vervollständigung wollen, muss Ihre Definitionsdatei genauer sein (siehe lodash definitions für ein Beispiel). Npm-Module, die mit ihren eigenen Typdefinitionen geliefert werden, werden vom TypeScript-Compiler automatisch verstanden (siehe Dokumentation). Für so ziemlich jede andere semi-populäre JavaScript-Bibliothek, die keine eigenen Definitionen enthält, hat jemand bereits Typdefinitionen durch ein anderes npm-Modul zur Verfügung gestellt. Diese Module sind mit dem Präfix "@types/" versehen und stammen aus einem Github-Repository namens DefinitelyTyped. Es gibt eine Einschränkung: Die Typdefinitionen müssen mit der Version der Bibliothek übereinstimmen, die Sie zur Laufzeit verwenden. Wenn dies nicht der Fall ist, kann TypeScript den Aufruf einer Funktion oder die Dereferenzierung einer Variablen, die bereits vorhanden ist, verweigern oder den Aufruf einer Funktion oder die Dereferenzierung einer Variablen, die nicht vorhanden ist, zulassen, einfach weil die Typen zur Kompilierungszeit nicht mit der Laufzeit übereinstimmen. Stellen Sie also sicher, dass Sie die richtige Version der Typdefinitionen für die richtige Version der von Ihnen verwendeten Bibliothek laden. Um ehrlich zu sein, ist dies etwas umständlich, und es könnte einer der Gründe sein, warum Sie sich nicht für TypeScript entscheiden, sondern stattdessen etwas wie Babel verwenden, bei dem Sie überhaupt keine Typdefinitionen benötigen. Andererseits können Sie, wenn Sie wissen, was Sie tun, alle Probleme, die durch falsche oder fehlende Definitionsdateien verursacht werden, leicht überwinden.Konvertierung von JavaScript zu TypeScript
Jede "js"-Datei kann in eine "ts"-Datei umbenannt und durch den TypeScript-Compiler laufen gelassen werden, um syntaktisch den gleichen JavaScript-Code als Ausgabe zu erhalten (wenn er überhaupt syntaktisch korrekt war). Selbst wenn der TypeScript-Compiler Kompilierungsfehler erhält, wird er immer noch eine
.js'-Datei erzeugen. Er kann sogar
.js-Dateien als Eingabe mit dem
--allowJs-Flag akzeptieren. Dies ermöglicht es Ihnen, sofort mit TypeScript zu arbeiten. Leider werden am Anfang wahrscheinlich Kompilierungsfehler auftreten. Man muss jedoch bedenken, dass es sich dabei nicht um spektakuläre Fehler handelt, wie man sie vielleicht von anderen Compilern gewohnt ist. Die Kompilierungsfehler, die anfangs bei der Konvertierung eines JavaScript-Projekts in ein TypeScript-Projekt auftreten, sind aufgrund der Natur von TypeScript unvermeidbar. TypeScript prüft *allen* Code auf Gültigkeit und muss daher über alle verwendeten Funktionen und Variablen Bescheid wissen. Daher müssen für alle Funktionen und Variablen Typdefinitionen vorhanden sein, sonst sind Kompilierungsfehler vorprogrammiert. Wie im obigen Kapitel erwähnt, gibt es für so ziemlich jedes JavaScript-Framework
.d.ts'-Dateien, die leicht mit der Installation von DefinitelyTyped-Paketen erworben werden können. Es könnte jedoch sein, dass Sie eine obskure Bibliothek verwendet haben, für die keine TypeScript-Definitionen verfügbar sind, oder dass Sie einige JavaScript-Primitive polyfilled haben. In diesem Fall müssen Sie Typdefinitionen für diese Bits bereitstellen, damit die Kompilierungsfehler verschwinden. Erstellen Sie einfach eine.d.ts
-Datei und fügen Sie sie in das Arrayfiles
der tsconfig.json ein, so dass sie vom TypeScript-Compiler immer berücksichtigt wird. Darin deklarieren Sie die Bits, die TypeScript nicht kennt, als Typany
. Sobald Sie alle Fehler beseitigt haben, können Sie nach und nach die Typisierung für diese Teile nach Ihren Bedürfnissen einführen. Um TypeScript in die Build-Pipeline einzubinden, sind auch einige Arbeiten zur (Neu-)Konfiguration der Build-Pipeline erforderlich. Wie im Kapitel über Kompilierung erwähnt, gibt es viele gute Ressourcen, und ich empfehle Ihnen, nach Startprojekten zu suchen, die die Kombination von Tools verwenden, mit denen Sie arbeiten möchten. Die größte Hürde ist die Lernkurve. Ich empfehle Ihnen, zunächst mit einem kleinen Projekt herumzuspielen. Sehen Sie sich an, wie es funktioniert, wie es gebaut wird, welche Dateien es verwendet, wie es konfiguriert ist, wie es in Ihrer IDE funktioniert, wie es strukturiert ist, welche Tools es verwendet usw. Die Konvertierung einer großen JavaScript-Codebasis nach TypeScript ist machbar, wenn Sie wissen, was Sie tun. Lesen Sie zum Beispiel diesen Blog über die Konvertierung von 600k Zeilen nach TypeScript in 72 Stunden). Stellen Sie einfach sicher, dass Sie die Sprache gut beherrschen, bevor Sie den Sprung wagen.Verabschiedung
TypeScript ist Open-Source (Apache 2 lizenziert, siehe GitHub) und wird von Microsoft unterstützt. Anders Hejlsberg, der leitende Architekt von C#, steht an der Spitze des Projekts. Es ist ein sehr aktives Projekt; das TypeScript-Team hat in den letzten Jahren viele neue Funktionen veröffentlicht und es sind noch viele weitere geplant (siehe die Roadmap). Einige Fakten zur Akzeptanz und Popularität:
"TypeScript Fundamentals" - ein Pluralsight-Videokurs von Dan Wahlin und John Papa ist eine wirklich gute, derzeit (25. März 2016) auf TypeScript 1.8 aktualisierte, Einführung in Typescript.
Für mich sind die wirklich guten Features, neben den netten Möglichkeiten für Intellisense, die Klassen, Schnittstellen, Module, die Einfachheit der Implementierung von AMD und die Möglichkeit, den Visual Studio Typescript Debugger zu verwenden, wenn er mit IE aufgerufen wird.
Zusammenfassend: Wenn es wie beabsichtigt eingesetzt wird, kann Typescript die JavaScript-Programmierung zuverlässiger und einfacher machen. Es kann die Produktivität des JavaScript-Programmierers während des gesamten SDLC erheblich steigern.