TypeScriptのエクスポート/インポートの問題

Question

私はTypeScriptを学び、エクスポート/インポートメカニズムを使いたいと思っています。私は3つの.TSファイルを持っており、コードは以下のようになります。

1）MyClass.ts：

/// <reference path="../Scripts/jquery.d.ts" /> 
/// <reference path="../Scripts/dx.all.d.ts" /> 
/// <reference path="../Scripts/go.d.ts" /> 

export class MyClass { 
    render(divId: string, text: string): void { 
     ... 
    } 
    getData(): void { 
     ... 
    } 
} 

2）Caller.ts：

import { MyClass } from './MyClass'; 

export class Caller { 
    execute() { 
     let myClass: MyClass = new MyClass(); 
     myClass.render("content", "Hello World"); 
     myClass.getData(); 
    } 
} 

3）Main.ts：

import { Caller } from './Caller'; 

window.onload =() => { 
    let caller: Caller = new Caller(); 
    caller.execute(); 
}; 

4）HTML：

<script src="~/Scripts/MyClass.js"></script> 
<script src="~/Scripts/Caller.js"></script>> 
<script src="~/Scripts/Main.js"></script> 

ただし、何も表示されません。

3個のエラーがあります。

• キャッチされないでSyntaxError：（MyClass.js用）予期しないトークン輸出
• キャッチされないでSyntaxError：（Caller.js用）予期しないトークン輸入
• キャッチされないでSyntaxError：予期しないトークンがインポート（Main.js用）

Answer 1

<script>を参照すると、私はそれがWebアプリケーションにあると思います。また、ファイルはES6モジュール構文を使用しています。

現在のところ、Google ChromeだけがネイティブにES6モジュールをサポートしていると思います。他のブラウザは、あらゆる種類のモジュール（ES6、CommonJS、AMD、SystemJs、UMD、...）をサポートしていません。アプリがChromeでのみ実行される場合は、tsconfigオプションmodule='ES6'を設定できます。

エルス

、いずれかを使用します。

• TypeScript namespaces代わりのmodules
  ロードするための小規模なプロジェクトおよび/または短いライフサイクル
• SystemJsのようなモジュールローダ用に推奨
• をあなたのメインスクリプトとその依存関係
  • もう少し複雑
  • は平野に事前にごES6モジュールをコンパイルするための場所RollupにHTMLページをロードするためのより多くのHTTPリクエスト
• WebPackのようなモジュールバンドラ、または新しいことを意味しますどのブラウザでもご利用いただけるjavascriptファイル
  • もっと複雑な解決策
  • あなたがあなたのファイルをロードするためにSystemJsのように、モジュールローダになりますヘルプ