35

「Webサイト」プロジェクトとしてセットアップされた既存のVisualStudioプロジェクトがあります。このようなプロジェクトを作成するには、[ファイル]->[新しいWebサイト]に移動します。これは、「Webアプリケーションプロジェクト」とは異なるプロジェクトタイプです。

このプロジェクトでTypeScriptを混ぜたいと思います。ただし、.tsファイルを「ビルド」して.jsファイルを生成するようにVisualStudioに指示する方法がわかりません。VS2012 TypeScriptプラグインがあり、ここで概説するように、TypeScriptプロジェクトを作成できます。そのプロジェクトはうまく機能しますが、それは「Webアプリケーションプロジェクト」に沿ったものです。「Webサイトプロジェクト」とは異なるプロジェクトタイプです。

また、.tsファイルを作成すると、そのファイル内でエディターがTypeScript構文の強調表示とインテリセンスを提供します。しかし、繰り返しになりますが、TypeScriptをJavaScriptにコンパイルする方法がわかりません。

少しの援助？

4

8 に答える 8

21

Visual Studio は、TypeScript ファイルの「保存時にコンパイル」をサポートするようになりました。私は Visual Studio 2013 Update 2を使用しています。Web サイト プロジェクトでこれを有効にするには、[ツール] -> [オプション] -> [テキスト エディター] -> [TypeScript] -> [プロジェクト] に移動し、[TypeScript ファイルを自動的にコンパイルする] チェックボックスをオンにします。プロジェクトの一部ではありません。」私のプロジェクトの一部であるファイルを明らかにコンパイルしているため、なぜこのようにラベル付けされているのかわかりません...

これに対する他の回答の多くは、ビルド プロセスに接続できないため、Web サイト プロジェクトには当てはまりません。Web サイト プロジェクトでは、ビルドは Visual Studio ではなく IIS によって処理されるため、csproj または vbproj ファイルはありません。

Web サイト プロジェクトを使用していて、「保存時にコンパイル」が機能しない場合は、いくつかの代替手段しかありません。

1) コマンド ライン TSC コンパイラを使用して、コードを手動でコンパイルします。

2) ファイルを手動でコンパイルするためのカスタム ツールを作成します。これを Visual Studio で使用するように構成できます。

3) TypeScript をコンパイルして JavaScript として返す「オンデマンド コンパイル」.aspx ページを作成します。

4) TypeScript Compile JavaScript プロジェクトを使用して、ブラウザーでコードを自動的に作成します。これにより、通常は Web サイト プロジェクトに付属する「オンデマンド コンパイル」が可能になります。

「保存時にコンパイル」がVSで機能する前は、TypeScript Compileを使用していました。今、私は「保存時にコンパイル」を喜んで使用しています。

于 2012-10-22T11:26:36.473 に答える
15

これは少し動くターゲットでしたが、それは TypeScript チームがすべての動作を改善してきたからです。以下では、最新のものから最も古いものまで、できるだけ多くのシナリオをカバーしようとしました。

これに関する最新の情報は、Web プロジェクトの場合でも、Visual Studio の最新バージョン (現在は v1.4) で機能するようになったことです。

TypeScript を既存のプロジェクトに追加することについての私のはるかに長い回答から、これらの省略されたメモを取りました。

対 2013/0.9.5

Visual Studio Extension for 0.9.5 以降を Visual Studio 2013 と共に使用している場合は、最初の TypeScript ファイルを追加するとすぐに、すべてが自動的に構成されることがわかります。

自動 TypeScript 化は機能しませんでしたか?

自動構成では、数行しか追加されません。手動で行うこともできます。

  <ItemGroup>
    <TypeScriptCompile Include="Scripts\app.ts" />
  </ItemGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

対 2012/0.9.x

次のプロジェクト ファイル構成が機能するはずです。

  <ItemGroup>
    <TypeScriptCompile Include="app.ts" />
  </ItemGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets')" />

さらに古い設定？

TypeScript を既存のプロジェクトに追加する最も信頼できる方法は、プロジェクト ファイルに以下を追加することです。

<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;  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

ここにもオプションのフラグを追加できます-次のように--module amd:

    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; --module amd  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
于 2012-10-12T23:37:26.557 に答える
4

2013 年 1 月 21 日にリリースされたバージョン 0.8.2 の時点で、VS2012 TypeScript プラグインは、WebEssentials を使用せずに保存時にコンパイルをサポートします。[ツール] > [オプション] > [テキスト エディター] > [TypeScript] > [プロジェクト] セクションに移動し、[自動コンパイル...] ボックスをオンにします。

ビルド プロセスの一部として、すべての .ts ファイルを 1 つの .js ファイルにコンパイルする場合 (おそらくそうする必要があります)、app.ts スクリプトに、含める必要があるすべてのファイルへの <reference> があることを確認してください。を開き、次のビルド前のステップをプロジェクトに追加します。

"C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --out app.js app.ts

( --out パラメーターを指定すると、tsc はすべての参照ファイルを含めるようになります。)

于 2013-01-22T12:42:49.283 に答える
2

プロジェクトファイルがないため、TypeScriptコンパイラを「手動で」実行するように戻す必要がある場合があります。

Visual Studioコマンドプロンプトを開きます（[スタート]->[プログラム]->[Microsoft Visual Studio 20xx]-> [VisualStudioツール]->[開発者コマンドプロンプト]）。

実行：tsc your_input_file.ts --target ES5

複数の.tsファイルを提供するには、@args_file_nameパラメーターを指定したテキストファイルを使用します。

それに飽きたら、すべてをバッチファイルに入れてください。

バッチファイルの使用に飽きたら、アプリをWebアプリケーションに変換し、Sohneeの回答に従って.projファイルを変更します。

于 2012-10-17T01:21:44.120 に答える
0

Josh さん、私は Visual Studio 2012 Express for Web を使用していますが、.ts ファイルを保存するたびに .js ファイルが自動的に生成されることに気付きました。

ファイルを保存するたびに .ts フォルダーをチェックし、これがあなたにも起こっていないかどうかを確認してください。

于 2013-08-21T16:47:17.107 に答える
-2

プロパティの .ts ファイルが TypeScriptCompiler に関連付けられているかどうかを確認します。

VS で .ts ファイルをいわゆる仮想プロジェクトで開くことは、VS Web プロジェクトでファイルへの参照を持つことと同じではないことに注意してください。最初のものでは、ビルドアクションを設定できません。もう1つはそうしますが。

PS。Web Essentials VS アドオンを入手して、ファイル保存時の変換、texteditor ts/js 分割、組み込みの最小化を取得します。

編集：ええ、最初は他のプロジェクトで利用できるそのようなビルドアクションがないことに気づきませんでした...しかし、ねえ、私はSohneを正しい方向に押しました。

于 2012-10-13T11:35:28.140 に答える