エクスポートとインポートはタイスクリプトでどのように機能しますか？

Question

私はJavascriptとTypescriptでAngular2クイックスタートチュートリアルを行っていましたが、javascriptバージョンでは、コンポーネントとモジュールが最初に変数に割り当てられていることがわかりました（window.app jsを介してアクセスできるグローバル変数ファイルやスクリプトブロック）、それは問題ありません。スクリプトのバージョンを入力するだけで、エクスポートとインポートが使用されました。生成されたJavaScriptコードを分析しようとしましたが、何も理解しませんでした。この輸出入がTyepescriptでどのように機能するかを説明できる人がいますか？ typescriptですで

Answer 1

インポートおよびエクスポートは、ここhttps://www.typescriptlang.org/docs/handbook/modules.htmlドキュメントでも説明されています。

toskvさんのコメントでは、TypeScriptファイル内の文がJavaScriptファイル内の文にどのように変換されるかは、おおよそtsconfig.jsonファイルで設定したモジュールシステムによって決まります。

たとえば、"module": "commonjs"を設定すると、タイプ/スクリプト（tsc）がimport/exportステートメントを本質的にnode.jsスタイルのrequire()ステートメントに変換します。このドキュメントは、node.jsモジュールがどのように動作するかの簡単で便利な例をいくつか示しています：https://nodejs.org/api/modules.html。活字体がSystemJSはそのうち私は専門家でない、理解できるフォーマットにあなたのインポート/エクスポート文を翻訳作る代わりに「commonjs」の「systemjs」の設定を使用

。

は、このプロセスは、角度2つのプロジェクトはまたtranspiled JavaScriptファイルを取得し、パッケージに変えるステップ築く必要とするという事実によってさらに複雑である「バンドル」をこれらのバンドルされたファイルは、（構成設定に応じて）連結され、縮小され、おそらくuglifiedさえあります。だから実行されている最終的なjavascriptコードを見ても、人間によって書かれたものではないので、実際には役に立ちません。

たとえば、Webpackビルドシステム（google webpack.js）は、JavaScriptコードで見つかるrequire()ステートメントを受け取り、独自の__webpack_require__関数で各モジュールをラップする魔法をいくつか実行します。これにより、ビルドシステムはプロジェクトファイル全体互いに依存関係を維持している1つまたは複数のJavaScriptファイルにバンドルします。言い換えれば

は、あなたが生産するJavaScriptコードを見る時間によって、人間の読者が理解しやすいことを意味するものではないです。この流れは、単にTS Source Code>TS Transpilation into JS Code>Module/Dependency Build Steps into Production JS Codeで表すことができる。

TL; DR活字体は、実際に、モジュールのインポート/エクスポートを処理しません。 transpilation時、それが今度は角度2アプリケーションにサービスを提供するための製品コードに変換される他モジュールシステム（Node.jsの又はSystemJS）が理解できる文にこれ​​らのステートメントを変換します。