Wie funktionieren Export und Import in Typoskript?

Question

Ich ging durch Angular2 Quickstart Tutorial mit Javascript und Typescript als auch, In Javascript-Version beobachtete ich, dass Komponenten und Module zuerst einer Variablen zugewiesen werden (window.app), die ich als einige globale Variable verstanden, die über js zugegriffen werden kann Dateien oder Skriptblöcke) und das ist in Ordnung. Um die Script-Version einfach zu exportieren und zu importieren, habe ich versucht, den generierten Javascript-Code zu analysieren, habe aber nichts verstanden. Kann mir jemand erklären, wie dieser Export und Import in Tyepescript funktioniert?

Answer 1

Import und Export in Typoskript sind gut durch die Dokumentation hier https://www.typescriptlang.org/docs/handbook/modules.html erklärt.

Wie toskv in seinem Kommentar sagte, hängt die Art und Weise, in der diese Anweisungen in Ihren TypScript-Dateien in Anweisungen in Ihren JavaScript-Dateien umgewandelt werden, stark von dem Modulsystem ab, das Sie in Ihrer tsconfig.json-Datei eingerichtet haben.

Zum Beispiel bewirkt die Einstellung "module": "commonjs", dass der TypeScript-Compiler (tsc) Ihre Import-/Exportanweisungen in im Wesentlichen node.js-artige require()-Anweisungen umwandelt. Diese Dokumentation enthält einige einfache, aber hilfreiche Beispiele dafür, wie node.js Module funktionieren: https://nodejs.org/api/modules.html.

Wenn Sie "systemjs" anstelle von "commonjs" verwenden, wird TypeScript Ihre Import-/Exportanweisungen in ein Format übersetzen, das SystemJS versteht, von dem ich kein Experte bin.

Dieser Prozess wird durch die Tatsache noch komplizierter, dass Angular 2-Projekte auch Build-Schritte erfordern, die die transpilierten JavaScript-Dateien in gepackte "Bundles" verwandeln. Diese gebündelten Dateien werden (abhängig von Ihren Konfigurationseinstellungen) verkettet, verkleinert und möglicherweise sogar verkompliziert. Es ist also nicht hilfreich, den letzten JavaScript-Code zu betrachten, der ausgeführt wird, da er nicht von Menschen geschrieben wurde. Das Webpack-Build-System (google webpack.js) benötigt require() Anweisungen, die es in JavaScript-Code findet, und zaubert jedes Modul in seine eigene __webpack_require__-Funktion, die es dem Build-System ermöglicht, die gesamte Projektdatei zu übernehmen Strukturieren und bündeln Sie sie in eine oder mehrere JavaScript-Dateien, die ihre Abhängigkeiten voneinander beibehalten.

Mit anderen Worten, wenn Sie sich den JavaScript-Code für die Produktion ansehen, ist er nicht dazu gedacht, von menschlichen Lesern verstanden zu werden. Der Fluss kann einfach durch TS Source Code>TS Transpilation into JS Code>Module/Dependency Build Steps into Production JS Code dargestellt werden.

TL; DR TypeScript behandelt das Modul Import/Export nicht. Während der Übertragung wandelt es diese Anweisungen in Anweisungen um, die andere Modulsysteme (node.js oder SystemJS) verstehen, die wiederum in Produktionscode umgewandelt werden, um eine Angular 2-Anwendung zu bedienen.