次の方法で共有

TypeScript コードのコンパイル (ASP.NET Core)

TypeScript NuGet パッケージを使用して、ASP.NET Core プロジェクトに TypeScript のサポートを追加します。 Visual Studio 2019 以降では、TypeScript SDK の代わりに NuGet パッケージを使用することをお勧めします。 TypeScript NuGet パッケージは、さまざまなプラットフォームと環境で移植性を高めます。

ASP.NET Core プロジェクトの場合、NuGet パッケージの一般的な使用方法の 1 つは、.NET Core CLI を使用して TypeScript をコンパイルすることです。 .NET シナリオでは、NuGet パッケージが推奨されるオプションであり、dotnet build や dotnet publishなどの .NET Core CLI コマンドを使用して TypeScript コンパイルを有効にする唯一の方法です。 また、ASP.NET Core と TypeScript との MSBuild 統合 場合は、NuGet パッケージを選択します。

Von Bedeutung

JavaScript プロジェクト システム (JSPS)または .esproj プロジェクト 基づくプロジェクトの場合は、NuGet の代わりに npm パッケージ を使用して TypeScript のサポートを追加します。

NuGet で TypeScript のサポートを追加する

TypeScript NuGet パッケージ TypeScript のサポートが追加されます。 TypeScript 3.2 以降の NuGet パッケージがプロジェクトにインストールされると、対応するバージョンの TypeScript 言語サービスがエディターに読み込まれます。

Visual Studio がインストールされている場合、それにバンドルされている node.exe は Visual Studio によって自動的に取得されます。 Node.js がインストールされていない場合は、Node.js Web サイトから LTS バージョンをインストールすることをお勧めします。

  1. Visual Studio で ASP.NET Core プロジェクトを開きます。

  2. ソリューション エクスプローラー (右側のウィンドウ)。 プロジェクト ノードを右クリックし、[NuGet パッケージの管理]選択します。 [参照] タブで、Microsoft.TypeScript.MSBuildを検索し、[インストール] をクリックしてパッケージをインストールします。

    NuGet パッケージ の追加

    Visual Studio は、ソリューション エクスプローラーの Dependencies ノードの下に NuGet パッケージを追加します。 次のパッケージ参照が *.csproj ファイルに追加されます。

    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.8.3">
   <PrivateAssets>all</PrivateAssets>
   <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>

  3. プロジェクト ノードを右クリックし、追加 > 新しい項目を選択します。 TypeScript JSON 構成ファイルを選択し、追加をクリックします。

    すべての項目テンプレートが表示されない場合は、[すべてのテンプレートの表示]選択し、項目テンプレートを選択します。

    Visual Studio によって、tsconfig.json ファイルがプロジェクト ルートに追加されます。 このファイルを使用して、TypeScript コンパイラのオプションを 構成できます。

  4. tsconfig.json を開き、更新して、必要なコンパイラ オプションを設定します。

    次の例を使用します。これは単純な tsconfig.json ファイルを示しています。

    {
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}

    この例では：

    • を含める は、TypeScript (*.ts) ファイルを見つける場所をコンパイラに指示します。
    • outDir オプション 、TypeScript コンパイラによってトランスパイルされるプレーンな JavaScript ファイルの出力フォルダーを指定します。
    • sourceMap オプションは、コンパイラが sourceMap ファイルを生成するかどうかを示します。

    前の構成では、TypeScript の構成の基本的な概要のみが示されています。 その他のオプションについては、「tsconfig.json」を参照してください。

アプリケーションをビルドする

  1. TypeScript (.ts) または TypeScript JSX (.tsx) ファイルをプロジェクトに追加し、TypeScript コードを追加します。 TypeScript の簡単な例については、次のコードを使用します。

    let message: string = 'Hello World';
console.log(message);

  2. 古い SDK 以外のスタイルのプロジェクトを使用している場合は、「ビルドする前に 既定のインポートを削除する 」の手順に従ってください。

  3. 「」「Build >」「Build Solution」を選択します。

    アプリは実行時に自動的にビルドされますが、ビルド プロセス中に発生する処理を確認する必要があります。

    ソース マップを生成した場合は、outDir オプションで指定されたフォルダーを開くと、生成された *.js ファイルと生成された *js.map ファイルが見つかります。

    デバッグにはソース マップ ファイルが必要です。

  4. プロジェクトを保存するたびにコンパイルする場合は、tsconfig.jsonの compileOnSave オプションを使用します。

    {
   "compileOnSave":  true,
   "compilerOptions": {
   }
}

タスク ランナーで gulp を使用してアプリをビルドする例については、「ASP.NET Core と TypeScript」を参照してください。

想定したバージョンと異なるバージョンの Node.js またはサードパーティ製ツールを Visual Studio が使用している場合に問題が発生した場合は、Visual Studio で使用するパスを設定する必要があります。 [ツール]>[オプション]を選択します。 [プロジェクトとソリューション]で、[Web パッケージ管理][外部 Web ツール]選択します。

アプリケーションを実行する

F5 押すか、ウィンドウの上部にある [スタート] ボタンを選択します。

NuGet パッケージ構造の詳細

Microsoft.TypeScript.MSBuild.nupkg には、次の 2 つのメイン フォルダーが含まれています。

  • によって フォルダーをビルドする

    このフォルダーには 2 つのファイルがあります。 どちらもエントリ ポイントです。TypeScript のメイン ターゲット ファイルと props ファイルのエントリ ポイントです。

    1. Microsoft.TypeScript.MSBuild.targets

      このファイルは、ツール フォルダーから Microsoft.TypeScript.targets をインポートする前に、TypeScript.Tasks.dllへのパスなど、ランタイム プラットフォームを指定する変数 設定します。

    2. Microsoft.TypeScript.MSBuild.props

      このファイルは、ツール フォルダーから Microsoft.TypeScript.Default.props インポートし、ビルドが NuGet によって開始されたことを示すプロパティを設定します。

  • ツール フォルダー

    2.3 より前のパッケージ バージョンには tsc フォルダーのみが含まれています。 Microsoft.TypeScript.targets と TypeScript.Tasks.dll はルート レベルにあります。

    パッケージ バージョン 2.3 以降では、ルート レベルには Microsoft.TypeScript.targets と Microsoft.TypeScript.Default.propsが含まれています。 これらのファイルの詳細については、MSBuild 構成を参照してください。

    さらに、フォルダーには次の 3 つのサブフォルダーが含まれています。

    1. net45

      このフォルダーには、依存する TypeScript.Tasks.dll およびその他の DLL が含まれています。 Windows プラットフォームでプロジェクトをビルドする場合、MSBuild はこのフォルダーの DLL を使用します。

    2. netstandard1.3

      このフォルダーには、Windows 以外のコンピューターでプロジェクトをビルドするときに使用される別のバージョンの TypeScript.Tasks.dllが含まれています。

    3. tsc

      このフォルダーには、tsc.js、tsserver.js、およびノード スクリプトとして実行するために必要なすべての依存関係ファイルが含まれています。

      注

      Visual Studio がインストールされている場合、NuGet パッケージは Visual Studio にバンドルされている node.exe のバージョンを自動的に取得します。 それ以外の場合は、Node.js をマシンにインストールする必要があります。

      3.1 より前のバージョンには、コンパイルを実行するための tsc.exe 実行可能ファイルが含まれていました。 バージョン 3.1 では、node.exeの使用を優先して実行可能ファイルが削除されました。

既定のインポートを削除する

SDK 形式以外の形式を使用する古い ASP.NET Core プロジェクトでは、プロジェクト ファイル要素の一部を削除することが必要になる場合があります。

プロジェクトの MSBuild サポートに NuGet パッケージを使用している場合、プロジェクト ファイルは Microsoft.TypeScript.Default.props または Microsoft.TypeScript.targetsインポートできません。 ファイルは NuGet パッケージによってインポートされるため、個別に含めると意図しない動作が発生する可能性があります。

  1. プロジェクトを右クリックし、[プロジェクトのアンロード]を選択します。

  2. プロジェクトを右クリックし、[<プロジェクト ファイル名> の編集] を選択します。

    プロジェクト ファイルが開きます。

  3. Microsoft.TypeScript.Default.props と Microsoft.TypeScript.targetsへの参照を削除します。

    削除するインポートは、次の XML のようになります。

    <Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

<Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />