Die Beziehung von TypeScript zu JavaScript
TypeScript ist eine typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird - typescriptlang.org .
JavaScript ist eine Programmiersprache, die vom Technischen Komitee 39 der EMCA entwickelt wurde , einer Gruppe von Personen, die sich aus vielen verschiedenen Interessengruppen zusammensetzt. TC39 ist ein von der ECMA veranstaltetes Komitee : eine interne Normungsorganisation. JavaScript hat viele verschiedene Implementierungen von vielen verschiedenen Anbietern (z. B. Google, Microsoft, Oracle usw.). Das Ziel von JavaScript ist es, die Verkehrssprache des Webs zu sein.
TypeScript ist eine Obermenge der JavaScript-Sprache, die über einen einzigen Open-Source-Compiler verfügt und hauptsächlich von einem einzigen Anbieter entwickelt wird: Microsoft. Das Ziel von TypeScript ist es, Fehler frühzeitig durch ein Typensystem zu erkennen und die JavaScript-Entwicklung effizienter zu gestalten.
Im Wesentlichen erreicht TypeScript seine Ziele auf drei Arten:
Unterstützung für moderne JavaScript-Funktionen - Die JavaScript-Sprache (nicht die Laufzeit) ist durch die ECMAScript- Standards standardisiert. Nicht alle Browser und JavaScript-Laufzeiten unterstützen alle Funktionen aller ECMAScript-Standards (siehe diese Übersicht ). TypeScript ermöglicht die Verwendung vieler der neuesten ECMAScript-Funktionen und übersetzt sie in ältere ECMAScript-Ziele Ihrer Wahl (siehe Liste der Kompilierungsziele unter der --targetCompileroption). Dies bedeutet, dass Sie neue Funktionen wie Module, Lambda-Funktionen, Klassen, den Spread-Operator und die Destrukturierung sicher verwenden können, während Sie mit älteren Browsern und JavaScript-Laufzeiten abwärtskompatibel bleiben.
Erweitertes Typsystem - Die Typunterstützung ist nicht Teil des ECMAScript-Standards und wird wahrscheinlich niemals auf die interpretierte Natur anstatt auf die kompilierte Natur von JavaScript zurückzuführen sein. Das Typsystem von TypeScript ist unglaublich umfangreich und umfasst: Schnittstellen, Aufzählungen, Hybridtypen, Generika, Vereinigungs- / Schnittpunkttypen, Zugriffsmodifikatoren und vieles mehr. Die offizielle Website von TypeScript bietet einen Überblick über diese Funktionen. Das Typensystem von Typescript ist den meisten anderen typisierten Sprachen ebenbürtig und in einigen Fällen wohl leistungsfähiger.
Unterstützung für Entwicklertools - Der TypeScript-Compiler kann als Hintergrundprozess ausgeführt werden, um sowohl die inkrementelle Kompilierung als auch die IDE-Integration zu unterstützen, sodass Sie einfacher navigieren, Probleme identifizieren, Möglichkeiten prüfen und Ihre Codebasis umgestalten können.
Die Beziehung von TypeScript zu anderen JavaScript-Zielsprachen
TypeScript hat eine einzigartige Philosophie im Vergleich zu anderen Sprachen, die mit JavaScript kompiliert werden. JavaScript-Code ist gültiger TypeScript-Code. TypeScript ist eine Obermenge von JavaScript. Sie können Ihre .jsDateien fast in .tsDateien umbenennen und TypeScript verwenden (siehe "JavaScript-Interoperabilität" weiter unten). TypeScript-Dateien werden zu lesbarem JavaScript kompiliert, sodass eine Rückmigration möglich ist und das Verständnis des kompilierten TypeScript überhaupt nicht schwierig ist. TypeScript baut auf den Erfolgen von JavaScript auf und verbessert seine Schwächen.
Einerseits verfügen Sie über zukunftssichere Tools, die moderne ECMAScript-Standards verwenden und diese auf ältere JavaScript-Versionen kompilieren, wobei Babel die beliebteste ist. Auf der anderen Seite gibt es Sprachen, die sich möglicherweise vollständig von JavaScript unterscheiden und auf JavaScript abzielen, z. B. CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js und eine ganze Reihe weiterer Hosts (siehe diese Liste)). Obwohl diese Sprachen möglicherweise besser sind als die Zukunft von JavaScript, besteht ein höheres Risiko, dass sie nicht genügend Akzeptanz finden, damit ihre Zukunft garantiert werden kann. Möglicherweise haben Sie auch größere Probleme, erfahrene Entwickler für einige dieser Sprachen zu finden, obwohl diejenigen, die Sie finden, oft enthusiastischer sind. Interop mit JavaScript kann auch etwas komplizierter sein, da sie weiter von dem entfernt sind, was JavaScript eigentlich ist.
TypeScript liegt zwischen diesen beiden Extremen und gleicht so das Risiko aus. TypeScript ist in keiner Weise eine riskante Wahl. Es ist sehr mühelos, sich daran zu gewöhnen, wenn Sie mit JavaScript vertraut sind, da es sich nicht um eine völlig andere Sprache handelt, eine hervorragende Unterstützung für die Interoperabilität von JavaScript bietet und in letzter Zeit viel Akzeptanz gefunden hat.
Optional statische Typisierung und Typinferenz
JavaScript wird dynamisch eingegeben. Dies bedeutet, dass JavaScript nicht weiß, um welchen Typ es sich bei einer Variablen handelt, bis sie zur Laufzeit tatsächlich instanziiert wird. Dies bedeutet auch, dass es möglicherweise zu spät ist. TypeScript erweitert JavaScript um Typunterstützung. Fehler, die durch falsche Annahmen einer Variablen eines bestimmten Typs verursacht werden, können vollständig beseitigt werden, wenn Sie Ihre Karten richtig spielen (wie streng Sie Ihren Code eingeben oder ob Sie Ihren Code überhaupt eingeben, liegt bei Ihnen).
TypeScript macht das Schreiben durch die Verwendung von Typinferenz etwas einfacher und weniger explizit. Zum Beispiel: var x = "hello"in TypeScript ist das gleiche wie var x : string = "hello". Der Typ wird einfach aus seiner Verwendung abgeleitet. Auch wenn Sie die Typen nicht explizit eingeben, sind sie immer noch vorhanden, um Sie davor zu bewahren, etwas zu tun, das sonst zu einem Laufzeitfehler führen würde.
TypeScript wird optional standardmäßig eingegeben. Zum Beispiel function divideByTwo(x) { return x / 2 }ist eine gültige Funktion in TypeScript, die mit jeder Art von Parameter aufgerufen werden kann, obwohl das Aufrufen mit einer Zeichenfolge offensichtlich zu einem Laufzeitfehler führt. Genau wie Sie es in JavaScript gewohnt sind. Dies funktioniert, da TypeScript den Typ implizit zuweist, wenn kein Typ explizit zugewiesen wurde und der Typ nicht abgeleitet werden konnte, wie im Beispiel dividierenByTwo any. Dies bedeutet, dass die Typensignatur der Funktion dividByTwo automatisch wird function divideByTwo(x : any) : any. Es gibt ein Compiler-Flag, das dieses Verhalten nicht zulässt : --noImplicitAny. Das Aktivieren dieses Flags bietet Ihnen ein höheres Maß an Sicherheit, bedeutet aber auch, dass Sie mehr tippen müssen.
Mit Typen sind Kosten verbunden. Erstens gibt es eine Lernkurve, und zweitens kostet es Sie natürlich etwas mehr Zeit, eine Codebasis mit der richtigen strengen Eingabe einzurichten. Nach meiner Erfahrung sind diese Kosten für jede ernsthafte Codebasis, die Sie mit anderen teilen, absolut wert. Eine groß angelegte Studie über Programmiersprachen und Codequalität in Github legt nahe, dass "statisch typisierte Sprachen im Allgemeinen weniger fehleranfällig sind als dynamische Typen und dass eine starke Typisierung in derselben Hinsicht besser ist als eine schwache Typisierung".
Es ist interessant festzustellen, dass in diesem Artikel festgestellt wird, dass TypeScript weniger fehleranfällig ist als JavaScript:
Für diejenigen mit positiven Koeffizienten können wir erwarten, dass die Sprache ceteris paribus mit einer größeren Anzahl von Fehlerkorrekturen assoziiert ist. Diese Sprachen umfassen C, C ++, JavaScript , Objective-C, PHP und Python. Die Sprachen Clojure, Haskell, Ruby, Scala und TypeScript weisen alle negative Koeffizienten auf, was bedeutet, dass diese Sprachen weniger wahrscheinlich als der Durchschnitt zu Fehlern bei der Fehlerbehebung führen.
Erweiterte IDE-Unterstützung
Die Entwicklungserfahrung mit TypeScript ist eine große Verbesserung gegenüber JavaScript. Die IDE wird vom TypeScript-Compiler in Echtzeit über ihre umfangreichen Typinformationen informiert. Dies bietet einige wesentliche Vorteile. Mit TypeScript können Sie beispielsweise sicher Refactorings wie Umbenennungen in Ihrer gesamten Codebasis durchführen. Durch die Vervollständigung des Codes erhalten Sie Inline-Hilfe zu den Funktionen, die eine Bibliothek möglicherweise bietet. Sie müssen sich nicht mehr an sie erinnern oder sie in Online-Referenzen nachschlagen. Kompilierungsfehler werden direkt in der IDE mit einer roten, schnörkellosen Linie gemeldet, während Sie mit dem Codieren beschäftigt sind. Alles in allem ermöglicht dies einen erheblichen Produktivitätsgewinn im Vergleich zur Arbeit mit JavaScript. Man kann mehr Zeit mit Codieren und weniger Zeit mit Debuggen verbringen.
Es gibt eine Vielzahl von IDEs, die TypeScript hervorragend unterstützen, wie Visual Studio Code, WebStorm, Atom und Sublime.
Strenge Nullprüfungen
Laufzeitfehler des Formulars cannot read property 'x' of undefinedoder undefined is not a functionwerden sehr häufig durch Fehler im JavaScript-Code verursacht. Standardmäßig reduziert TypeScript bereits die Wahrscheinlichkeit, dass solche Fehler auftreten, da keine Variable verwendet werden kann, die dem TypeScript-Compiler nicht bekannt ist (mit Ausnahme der Eigenschaften anytypisierter Variablen). Es ist jedoch immer noch möglich, fälschlicherweise eine Variable zu verwenden, die auf eingestellt ist undefined. Mit der 2.0-Version von TypeScript können Sie diese Art von Fehlern jedoch durch die Verwendung von nicht nullbaren Typen beseitigen. Dies funktioniert wie folgt:
Wenn strenge Nullprüfungen aktiviert sind ( --strictNullChecksCompiler-Flag), kann der TypeScript-Compiler undefinedeiner Variablen nur zugewiesen werden, wenn Sie sie ausdrücklich als nullbar deklarieren. Zum Beispiel let x : number = undefinedwird in einem Compiler - Fehlern führen. Dies passt perfekt zur Typentheorie, da undefinedes sich nicht um eine Zahl handelt. Man kann definieren x, um ein Summentyp zu sein numberund dies undefinedzu korrigieren : let x : number | undefined = undefined.
Sobald bekannt ist, dass ein Typ nullwertfähig ist, dh von einem Typ, der auch den Wert haben kann, nulloder undefinedder TypeScript-Compiler kann durch eine auf dem Kontrollfluss basierende Typanalyse bestimmen, ob Ihr Code eine Variable sicher verwenden kann oder nicht. Mit anderen Worten, wenn Sie überprüfen, ob eine Variable undefinedbeispielsweise eine ifAnweisung durchläuft, schließt der TypeScript-Compiler, dass der Typ in diesem Zweig des Kontrollflusses Ihres Codes nicht mehr nullwertfähig ist und daher sicher verwendet werden kann. Hier ist ein einfaches Beispiel:
let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.
Während des Builds gab der Co-Designer der Konferenz 2016 von TypeScript Anders Hejlsberg eine detaillierte Erklärung und Demonstration dieser Funktion: Video (von 44:30 bis 56:30).
Zusammenstellung
Um TypeScript verwenden zu können, benötigen Sie einen Erstellungsprozess zum Kompilieren in JavaScript-Code. Der Erstellungsprozess dauert in der Regel nur einige Sekunden, abhängig von der Größe Ihres Projekts. Der TypeScript-Compiler unterstützt die inkrementelle Kompilierung ( --watchCompiler-Flag), sodass alle nachfolgenden Änderungen schneller kompiliert werden können.
Der TypeScript-Compiler kann Quellzuordnungsinformationen in die generierten .js-Dateien einbinden oder separate .map-Dateien erstellen. Quellzuordnungsinformationen können durch Debuggen von Dienstprogrammen wie Chrome DevTools und anderen IDEs verwendet werden, um die Zeilen im JavaScript mit denen zu verknüpfen, die sie im TypeScript generiert haben. Auf diese Weise können Sie Haltepunkte festlegen und Variablen zur Laufzeit direkt in Ihrem TypeScript-Code überprüfen. Quellkarteninformationen funktionieren ziemlich gut, es gab sie schon lange vor TypeScript, aber das Debuggen von TypeScript ist im Allgemeinen nicht so gut wie bei direkter Verwendung von JavaScript. Nehmen Sie thiszum Beispiel das Schlüsselwort. Aufgrund der thisseit ES2015 geänderten Semantik des Schlüsselworts um Schließungen thiskann es tatsächlich zur Laufzeit als aufgerufene Variable existieren _this(siehe diese Antwort). Dies kann Sie beim Debuggen verwirren, ist jedoch im Allgemeinen kein Problem, wenn Sie davon wissen oder den JavaScript-Code überprüfen. Es sollte beachtet werden, dass Babel genau das gleiche Problem hat.
Der TypeScript-Compiler kann noch einige andere Tricks ausführen, z. B. das Generieren von Abfangcode basierend auf Dekoratoren , das Generieren von Modulladecode für verschiedene Modulsysteme und das Parsen von JSX . Neben dem Typescript-Compiler benötigen Sie jedoch wahrscheinlich ein Build-Tool. Wenn Sie beispielsweise Ihren Code komprimieren möchten, müssen Sie Ihrem Erstellungsprozess andere 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. Die TypeScript-Dokumentation enthält einen Abschnitt zur Integration in Build-Tools , der alle Aspekte abdeckt. Ein Linter ist auch verfügbar, falls Sie noch mehr Bauzeit prüfen möchten. Es gibt auch eine große Anzahl von Seed-Projekten, mit denen Sie mit TypeScript in Kombination mit einer Reihe anderer Technologien wie Angular 2, React, Ember, SystemJS, Webpack, Gulp usw. beginnen können.
JavaScript-Interoperabilität
Da TypeScript so eng mit JavaScript verwandt ist, verfügt es über hervorragende Interoperabilitätsfunktionen. Für die Arbeit mit JavaScript-Bibliotheken in TypeScript ist jedoch zusätzliche Arbeit erforderlich. Typoskript Definitionen sind erforderlich , damit das Typoskript Compiler versteht , dass Funktionsaufrufe wie _.groupByoder angular.copyoder $.fadeOutsind nicht in der Tat illegal Aussagen. Die Definitionen für diese Funktionen werden in .d.tsDateien abgelegt.
Die einfachste Form, die eine Definition annehmen kann, besteht darin, die Verwendung eines Bezeichners in irgendeiner Weise zuzulassen. Wenn Sie beispielsweise Lodash verwenden , können Sie mit einer einzelnen Zeilendefinitionsdateideclare var _ : any jede gewünschte Funktion aufrufen _, aber dann können Sie natürlich auch noch Fehler machen: _.foobar()Dies wäre ein legaler TypeScript-Aufruf, ist es aber natürlich , ein illegaler Anruf zur Laufzeit. Wenn Sie eine ordnungsgemäße Typunterstützung und Code-Vervollständigung wünschen, muss Ihre Definitionsdatei genauer sein ( ein Beispiel finden Sie unter lodash-Definitionen ).
Npm-Module , die mit ihren eigenen Typdefinitionen vorgepackt sind, werden vom TypeScript-Compiler automatisch verstanden (siehe Dokumentation ). Für so ziemlich jede andere halbpopuläre JavaScript-Bibliothek, die keine eigenen Definitionen enthält, hat jemand bereits Typdefinitionen über ein anderes npm-Modul verfügbar gemacht. Diesen Modulen wird "@ types /" vorangestellt und sie 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, können Sie mit TypeScript möglicherweise keine Funktion aufrufen oder eine vorhandene Variable dereferenzieren oder eine Funktion aufrufen oder eine nicht vorhandene Variable dereferenzieren, einfach weil die Typen zur Kompilierungszeit nicht mit der Laufzeit übereinstimmen . Stellen Sie daher 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 ein wenig problematisch, und dies kann einer der Gründe sein, warum Sie sich nicht für TypeScript entscheiden, sondern sich für etwas wie Babel entscheiden, das überhaupt nicht unter Typdefinitionen leiden muss. Wenn Sie jedoch wissen, was Sie tun, können Sie problemlos alle Probleme lösen, die durch falsche oder fehlende Definitionsdateien verursacht werden.
Konvertieren von JavaScript in TypeScript
Jede .jsDatei kann in eine .tsDatei umbenannt und über den TypeScript-Compiler ausgeführt werden, um syntaktisch denselben JavaScript-Code wie eine Ausgabe zu erhalten (sofern dieser überhaupt syntaktisch korrekt war). Selbst wenn der TypeScript-Compiler Kompilierungsfehler erhält, wird dennoch eine .jsDatei erstellt. Es kann sogar .jsDateien als Eingabe mit dem --allowJsFlag akzeptieren . Auf diese Weise können Sie sofort mit TypeScript beginnen. Leider treten am Anfang wahrscheinlich Kompilierungsfehler auf. Man muss bedenken, dass dies keine Show-Stop-Fehler sind, wie Sie es von anderen Compilern gewohnt sind.
Die Kompilierungsfehler, die am Anfang beim Konvertieren eines JavaScript-Projekts in ein TypeScript-Projekt auftreten, sind von Natur aus unvermeidbar. TypeScript überprüft den gesamten Code auf Gültigkeit und muss daher alle verwendeten Funktionen und Variablen kennen. Daher müssen für alle Typdefinitionen vorhanden sein, da sonst zwangsläufig Kompilierungsfehler auftreten. Wie im obigen Kapitel erwähnt, gibt es für so ziemlich jedes JavaScript-Framework .d.tsDateien, die mit der Installation von DefinitelyTyped-Paketen leicht abgerufen werden können. Es kann jedoch sein, dass Sie eine obskure Bibliothek verwendet haben, für die keine TypeScript-Definitionen verfügbar sind, oder dass Sie einige JavaScript-Grundelemente mehrfach ausgefüllt haben. In diesem Fall müssen Sie Typdefinitionen für diese Bits angeben, damit die Kompilierungsfehler verschwinden. Erstellen Sie einfach eine .d.tsDatei und fügen Sie sie in das filesArray von tsconfig.json ein , damit sie vom TypeScript-Compiler immer berücksichtigt wird. Deklarieren Sie darin die Bits, die TypeScript nicht als Typ kennt any. Sobald Sie alle Fehler beseitigt haben, können Sie diese Teile nach Ihren Wünschen schrittweise eingeben.
Einige Arbeiten zur (Neu-) Konfiguration Ihrer Build-Pipeline sind ebenfalls erforderlich, um TypeScript in die Build-Pipeline zu integrieren. Wie im Kapitel über die 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 ermutige Sie, zunächst mit einem kleinen Projekt herumzuspielen. Schauen Sie, wie es funktioniert, wie es erstellt, welche Dateien es verwendet, wie es konfiguriert ist, wie es in Ihrer IDE funktioniert, wie es strukturiert ist, welche Tools es verwendet usw. Wenn Sie wissen, ist es möglich, eine große JavaScript-Codebasis in TypeScript zu konvertieren was machst du. Lesen Sie diesen Blog zum Beispiel über die Konvertierung von 600.000 Zeilen in Typoskript in 72 Stunden . Stellen Sie einfach sicher, dass Sie die Sprache gut verstehen, bevor Sie den Sprung machen.
Annahme
TypeScript ist Open Source (Apache 2 lizenziert, siehe GitHub ) und wird von Microsoft unterstützt. Anders Hejlsberg , der leitende Architekt von C #, leitet das Projekt. Es ist ein sehr aktives Projekt; Das TypeScript-Team hat in den letzten Jahren viele neue Funktionen veröffentlicht, und es sind noch viele großartige geplant (siehe Roadmap ).
Einige Fakten zu Adoption und Popularität:
- In der StackOverflow-Entwicklerumfrage 2017 war TypeScript der beliebteste JavaScript-Transpiler (9. Platz insgesamt) und gewann den dritten Platz in der beliebtesten Programmiersprachenkategorie.
- In der Umfrage zum Stand von js im Jahr 2018 wurde TypeScript als einer der beiden großen Gewinner in der Kategorie JavaScript-Aromen deklariert (wobei ES6 der andere ist).
- In der StackOverlow-Deverloper-Umfrage 2019 stieg TypeScript unter professionellen Entwicklern auf den 9. Platz der beliebtesten Sprachen und überholte sowohl C als auch C ++. Es belegte erneut den dritten Platz unter den beliebtesten Sprachen.