AMDとrequire.jsのTypescript

Question

AMDとrequire.jsでTypescriptを使用していますが、モジュールをロードした後に実行される出力コードにtypescriptコンパイラがありません。

これはmain.tsです：

import { foo } from './bar'; 

foo('world'); 

これはbar.tsです：

export function foo(name: string) { 
    alert('Hello ' + name); 
} 

私は、次のtsconfig.jsonファイルでこれをコンパイルします。

{ 
    "compilerOptions": { 
     "alwaysStrict": true, 
     "module": "amd", 
     "outFile": "client.js", 
     "target": "es5" 
    }, 
    "files": [ 
     "main.ts" 
    ] 
} 

そして、このように私のHTMLでそれを含めます：

<script data-main="client/client.js" src="/static/require.js"></script> 

しかし、生成されたJavaScriptコードは次のようになります。

define("bar", ["require", "exports"], function (require, exports) { 
    "use strict"; 
    function foo(name) { 
     alert('Hello ' + name); 
    } 
    exports.foo = foo; 
}); 
define("main", ["require", "exports", "bar"], function (require, exports, bar) { 
    "use strict"; 
    bar.foo('world'); 
}); 

すべては私が直接mainモジュール内のコードを実行したいという事実から除き、罰金です。だから、最後の定義は

define(["require", "exports", "bar"], ... 

の代わりに、現在

define("main", ["require", "exports", "bar"], ... 

、私はちょうどmainモジュールをロードするためにJavaScriptで記述された第三のスクリプトを必要とするべきである、と私はそれは悪いスタイルがmainを持つように考えますモジュールを再利用可能なコードとして使用します。

typescriptコンパイラでモジュール定義の代わりにmain.tsを実行可能な定義として出力するにはどうすればよいですか？

Answer 1

'import ...'を使用すると、TypeScriptはあなたの質問に表示されているようなAMDモジュールをコンパイルします。次のコードを試してみてください（このチュートリアルもチェックしてください：http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/）。

/// <reference path="[YOUR IMPORT FILE]" /> 
/// ... 

/** 
* Main entry point for RequireJS 
*/ 
require(
    [ 
     // YOUR IMPORT DEFINITIONS 
    ], 
    (/* YOUR IMPORT VARIABLES */) => { 
     'use strict'; 

     // YOUR CODE HERE 
    } 
);