.cshtml Razorファイル内のTypeScript

Question

私はASP.NET-MVCフレームワークを使用して新しいプロジェクトを開始しています。 JavaScriptの代わりにこのプロジェクトでTypeScriptを使用したいと思います。 TypeScriptはVisual Studioで簡単にサポートされていますが、.cshtmlカミソリファイルとは完全に互換性がありません。 .tsファイル内にクラスを作成し、.cshtmlファイル内でそれらのクラスを呼び出すことができます。問題は、.cshtmlファイルのオブジェクトにパラメータを渡すときです。TypeSafetyは無視され、関数は次のように実行されます。タイプは決して定義されなかった。

.TSあなたが見ることができるように

var instance = new SomeClass("Timmy"); 
instance.sayName(); 

ファイル.cshtml、私ははっきりのみにパラメータを定義していても、コンストラクタに文字列を渡すのです

export class SomeClass { 

    name: number; 

    constructor(public tName: number) { 
     this.name = tName; 
    } 

    public sayName() { 
     alert(this.name); 
    } 
} 

を提出数字を受け入れますが、TypeSafelyは無視され、問題がないかのようにTypeScript/JavaScriptが実行されます。

両方のファイルタイプがマイクロソフトによって発明されたので、私は少しお互いに親しみがないのに少し驚いています。これは世界の終わりではない、少なくとも私はまだオブジェクト指向プログラミングを使用することができる、私はちょうど誰かがこれを経験していると私は簡単な説明を与えることができます興味があります。

Answer 1

活字体のtranspilerのみのチェックとだけ含まれているファイルをtranspiles：

• Javascriptを
• 活字体で追加されたいくつかのsyntaxique砂糖コードでのJavascript（静的型付け、ジェネリッククラスなど...）

CSHTMLファイルは基本的にRazor/C＃コードともちろんHTML/JavaScript/CSSを含むように作成されています。

一部の開発者は、JavascriptコードとCSSスタイルシートをCshtmlファイルに直接追加しようとしていますが、これは良い方法ではありません。

JavaScriptコードとCSSスタイルは、それぞれ独自のファイルである必要があります。次に、CSHTMLにscript（Javascript）タグまたはstyle（CSS）タグを使用してファイルを参照します。あなたのビュー（CSHTMLまたは単にHTML）に直接Javascriptコードを置く

それはUnobtrusive JavaScriptの次プリンシペを破るために推奨されていません：ウェブからの機能の

分離（「行動層」）ページの構造/コンテンツとプレゼンテーション（ソースウィキペディア）は

一部ASP.Net MVCの開発者は、まだ直接彼らのレイザーに自分のJavascriptのコードを入れていきBECAを見てビューモデルからのデータをJavaScriptコードに直接渡す必要があります。 Javascriptコードがすでにビューに入っていると、複雑なことなくデータを渡すのは簡単です。しかし、私はすでにこれが良いとは言いませんでした;-)。

Unobntrusive JavaScriptの原則を破るこの種のものは避けられます。 JavaScriptコードで読み取られる必要があるすべてのデータは、HTML要素のデータ属性を使用して保存する必要があります。あなたの活字体のコードで次に

<span id="mySpan" data-t-name="123456">Hello World</span> 

ちょうどあなたがこのようなあなたのCSHTMLビューに設定されているデータを取得するjQueryの（またはバニラジャバスクリプト）を使用します。活字体からJS生成されたファイルを参照し、その後

let tName: number = int.Parse($("#mySpan").data("t-name")); 
var instance = new SomeClass(tName); 
instance.sayName(); 

をあなたのCSHTMLに。

希望します。