14

MVC を使用する場合、次のように、JavaScript に挿入された Razor を使用して、サーバーのモデル データをクライアント側の JavaScript に渡すことがあります。

<script type="text/javascript">
    var myClientGuid = '@Model.MyServerGuid';
</script>

これにより、名前付きの JavaScript 変数myClientGuidがサーバー側モデル プロパティの値に設定されますMyServerGuid。クライアントに到達すると、コードはブラウザー内で次のようになります。

<script type="text/javascript">
    var myClientGuid = 'EF0077AB-0482-4D91-90A7-75285F01CA6F';
</script>

これにより、外部 JavaScript ファイルがこの変数を使用できるようになります。

私の質問は、TypeScript では、 すべてのコードを外部ファイル経由で参照する必要があるため、サーバー側のフィールドを TypeScript コードに渡す最良の方法は何ですか? 外部コード ファイルに Razor コードを含めることはできません。プロジェクト内で JavaScript と Typescript を混合して、ビューで上記と同じ手法を使用する必要がありますか?

4

2 に答える 2

17

TypeScriptコンパイラは、サーバー側のフィールドが存在することを知る必要があります。これを行う最も簡単な方法は、アンビエント宣言を使用することです（仕様のセクション10を参照）。たとえば、myClientGuidを使用する必要がある.tsファイルがある場合は、次のことができます。

declare var myClientGuid: string;

メインの.tsファイルの上部にあります。コンパイラはこのvar宣言のコードを生成しないため、何も壊すことはありません。これで、その.tsファイルを参照するすべてのファイルは、グローバルスコープで使用可能なmyClientGuid文字列があることを認識します。

于 2012-10-09T18:19:01.760 に答える
4

別の解決策 (グローバル変数を回避するため) は、必要なサーバー側フィールドをパラメーターとして受け取る関数で TypeScript コードをラップすることです。

TypeScript ファイル内:

function setupMyPage(myGuid:string) {
   ...
}

.cshtml では:

<script src='@Url.Content("<path-to-typescript>")'></script>
<script>
    setupMyPage('@Model.MyServerGuid');
</script>

RequireJS を使用している場合は、setupMyPage関数をモジュールとしてエクスポートして、関数をグローバル名前空間に追加しないようにすることもできます。

TypeScript ファイル内:

export = setupMyPage;

.cshtml では:

<script>
    require(['@Url.Content("<path-to-typescript>")'], function(setupMyPage) {
        setupMyPage('@Model.MyServerGuid');
    };
</script>
于 2014-08-08T11:24:54.070 に答える