46

typescriptの背後にあるアイデアは気に入っていますが、ASP.NetMVCプロジェクトに含める方法がわからないようです。*.tsVisual Studio拡張機能を既にインストールしましたが、ファイルにコンパイルされるファイルを追加する方法の例やドキュメントが見つからないよう*.jsです。

編集:実際には、Win8の例にファイル.jsprojが含まれて処理される方法を複製する必要があり.tsますか?それとも、HTML / JS Win8プロジェクトでのみ機能しますか?

4

6 に答える 6

25

警告: TypescriptとMVCの両方がこの回答以降大幅に変更されたため、この回答はかなり古くなっています。後でアップデートを試みます。-リッチコーダー

答えてくれたSohneeに感謝します。

[追加]>[新しいアイテム]ダイアログを使用して、TypeScriptファイルを既存のプロジェクトに追加できます。 exampleImage 'Typescript File'アイテムはWebグループの下ではなく、この場合はVisual C#の親の下にあることに注意してください。

これでTypeScriptファイルが追加され、残りはVisualStudioが行います。

次に、次の行をプロジェクトファイルに追加する必要があります。

 <ItemGroup>
    <AvailableItemName Include="TypeScriptCompile" />
 </ItemGroup>
 <ItemGroup>
    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
 </ItemGroup>
 <Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

私にとっては完璧に機能しましたが、問題が発生した場合はコメントしてください。

于 2012-10-02T23:38:13.750 に答える
19

それは正しいです。必要なのは、.tsファイルを.jsファイルにビルドするためのmsビルドターゲットだけです。Win8の例は、$(ProjectDir)***。ts(またはプロジェクト内のすべての.tsファイル)として定義されているitemGroupTypeScriptCompileに属するすべてのファイルでtscを呼び出すbeforeBuildターゲットを示しています。

このパターンの複製は、Win8プロジェクトだけでなく、すべてのmsbuildプロジェクトで機能するはずです。

これが私が話していることのサンプルです:これをmsbuildプロジェクトに追加すると、ビルドの開始時に.tsファイルを同等の.jsファイルにコンパイルする必要があります。

<ItemGroup> 
   <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>


<Target Name="TypeScriptCompile" BeforeTargets="Build">
   <Message Text="Compiling TypeScript files" />
   <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>
于 2012-10-01T22:14:39.563 に答える
7

プロジェクトにmsbuildターゲットファイルを追加するnugetパッケージをまとめました。tscコンパイラを実行し、出力をクリーンアップして、Visual Studioのエラーをダブルクリックし、ファイル/行/列にジャンプできるようにします。

https://www.nuget.org/packages/Sholo.TypeScript.Build

tscでコンパイルするものについては、プロパティウィンドウのビルドアクションを「TypeScriptCompile」に設定する必要があります。TypeScriptをいじくり回して数日経ちましたが、参照を行っている.tsファイルはTypeScriptCompileに設定する必要がありますが、参照しているだけのファイルはymmvに設定する必要があります。また、すべてのファイルを表示して、元の.jsファイルを追加する必要がある場合もあります。関連する.ts/.js / .d.tsファイルをグループ化する場合は、VsCommands拡張機能を確認してください。ワークフローは、NetDemon/同様の拡張機能でも非常に優れています。

于 2012-10-04T00:55:15.907 に答える
4

バンドルとミニファイを使用している場合は、TypeScriptをJavascriptにコンパイルするIBundleTransformの実装をリリースしました。これはGitHubとNuGet(Install-Package TypeScriptBundleTransform)にあります。バンドルとミニファイをまだ使用していない場合は、一見の価値があります。

于 2012-10-07T22:51:18.887 に答える
3

アップデート:

Web Essentials 2012プラグインをインストールするだけで、保存時に自動コンパイルが行われます。.jsと.min.jsの両方と、TypeScriptコードの横にあるJavaScript出力を表示するためのすっきりとした分割ビューがあります。


これは私が使用している大雑把な方法です:

プロジェクト>プロパティ>ビルドイベントを右クリックします

PreBuildボックスはこれを貼り付けます(プロジェクト内のすべての.tsファイルを再帰的にビルドします):

forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"

特定のエントリファイルを作成する場合:

tsc $(ProjectDir)MyScripts/myfile.ts

私はそれを行うためのより良い方法があると確信しています。

于 2012-10-02T01:10:52.793 に答える
1

Microsoft ASP.NET Web最適化フレームワーク(別名Bundling and Minification)を使用している場合は、モジュールBundleTransformer.TypeScriptがインストールされたBundleTransformerを使用してみくださいTypeScriptコードのJSへのコンパイルに加えて、バンドルトランスフォーマーの他のモジュール( BundleTransformer.MicrosoftAjaxBundleTransformer.YuiBundleTransformer.ClosureBundleTransformer.JsMin、 BundleTransformer)を使用して、生成されたJSコードの縮小を生成することもできます。 UglifyJsBundleTransformer.Packer

于 2012-10-19T16:43:16.740 に答える