Kompilace kódu TypeScriptu (ASP.NET Core)

2025-06-12

K přidání podpory TypeScriptu do projektů ASP.NET Core použijte balíček TypeScript NuGet. Počínaje sadou Visual Studio 2019 se doporučuje místo sady TypeScript SDK použít balíček NuGet. Balíček NuGet TypeScript poskytuje větší přenositelnost napříč různými platformami a prostředími.

U projektů ASP.NET Core je jedním z běžných použití balíčku NuGet kompilace TypeScriptu pomocí rozhraní příkazového řádku .NET Core. Ve scénářích .NET je balíček NuGet upřednostňovanou možností a jediným způsobem, jak povolit kompilaci TypeScriptu pomocí příkazů rozhraní příkazového řádku .NET Core, jako jsou dotnet build a dotnet publish. Pro integraci MSBuild s ASP.NET Core a TypeScriptem zvolte balíček NuGet.

Důležitý

Pro projekty založené na javascriptovém projektovém systému (JSPS)nebo .esproj projekty použijte balíček npm místo NuGetu k přidání podpory TypeScriptu.

Přidání podpory TypeScriptu pomocí NuGetu

balíček NuGet TypeScript přidává podporu TypeScriptu. Při instalaci balíčku NuGet pro TypeScript 3.2 nebo vyšší do projektu se v editoru načte odpovídající verze služby jazyka TypeScript.

Pokud je Visual Studio nainstalované, pak ho Visual Studio automaticky rozpozná společně s balíčkem node.exe. Pokud nemáte nainstalované Node.js, doporučujeme nainstalovat verzi LTS z webu Node.js.

Otevřete projekt ASP.NET Core v sadě Visual Studio.
V Průzkumníku řešení (pravé podokno) klikněte pravým tlačítkem myši na uzel projektu a zvolte Spravovat balíčky NuGet. Na kartě Procházet vyhledejte Microsoft.TypeScript.MSBuild, a poté klikněte na Nainstalovat pro instalaci balíčku.

Visual Studio přidá balíček NuGet do závislosti uzlu v Průzkumníku řešení. Následující odkaz na balíček se přidá do souboru *.csproj.
```
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.8.3">
   <PrivateAssets>all</PrivateAssets>
   <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
```
Klikněte pravým tlačítkem myši na uzel projektu a zvolte Přidat > Nová položka. Zvolte konfigurační soubor TypeScript JSON , a potom klikněte na tlačítko Přidat.

Pokud nevidíte všechny šablony položek, zvolte Zobrazit všechny šablonya pak zvolte šablonu položky.

Visual Studio přidá soubor tsconfig.json do kořenového adresáře projektu. Tento soubor můžete použít k konfiguraci možností pro kompilátor TypeScript.
Otevřete tsconfig.json a aktualizujte a nastavte požadované možnosti kompilátoru.

Použijte následující příklad, který ukazuje jednoduchý soubortsconfig.json .
```
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
V tomto příkladu:
- zahrnout kompilátoru řekne, kde najít soubory TypeScriptu (*.ts).
- outDir možnost určuje výstupní složku pro prosté javascriptové soubory transpilované kompilátorem TypeScriptu.
- možnost sourceMap označuje, zda kompilátor generuje sourceMap soubory.
Předchozí konfigurace poskytuje pouze základní úvod ke konfiguraci TypeScriptu. Další možnosti najdete viz tsconfig.json.

Sestavení aplikace

Přidejte do projektu soubory TypeScript (.ts) nebo TypeScript JSX (.tsx) a pak přidejte kód TypeScriptu. Pro jednoduchý příklad TypeScriptu použijte následující kód:
```
let message: string = 'Hello World';
console.log(message);
```
Pokud používáte starší projekt, který není ve stylu sady SDK, před sestavením postupujte podle pokynů v tématu Odebrání výchozích importů .
Zvolte Sestavení > Sestavit Solution.

I když se aplikace při spuštění automaticky sestaví, chceme se podívat na něco, co se stane během procesu sestavení:

Pokud jste vygenerovali zdrojové mapy, otevřete složku zadanou v možnosti outDir a vyhledejte vygenerované *.js soubory spolu s vygenerovanými soubory *js.map.

Soubory zdrojové mapy se vyžadují pro ladění.
Pokud chcete kompilovat pokaždé, když projekt uložíte, použijte v tsconfig.jsonmožnost compileOnSave .
```
{
   "compileOnSave":  true,
   "compilerOptions": {
   }
}
```

Příklad použití nástroje gulp s spouštěčem úloh k sestavení aplikace najdete v tématu ASP.NET Core a TypeScript.

Pokud narazíte na problémy, kdy Visual Studio používá verzi Node.js nebo nástroj třetí strany, který se liší od verze, kterou jste očekávali, možná budete muset nastavit cestu, kterou má Visual Studio používat. Zvolte Nástroje>Možnosti. V části Projekty a řešenízvolte Správa webových balíčků>externí webové nástroje.

Spuštění aplikace

Stiskněte F5 nebo vyberte tlačítko Start v horní části okna.

Podrobnosti struktury balíčku NuGet

Microsoft.TypeScript.MSBuild.nupkg obsahuje dvě hlavní složky:

složku sestavení

V této složce jsou umístěny dva soubory. Oba jsou vstupní body – a to pro hlavní cílový soubor TypeScriptu a soubor props, v uvedeném pořadí.
1. Microsoft.TypeScript.MSBuild.targets
  
  Tento soubor nastaví proměnné, které určují platformu runtime, například cestu k TypeScript.Tasks.dll, před importem Microsoft.TypeScript.targets ze složky tools.
2. Microsoft.TypeScript.MSBuild.props
  
  Tento soubor importuje Microsoft.TypeScript.Default.props z nástrojů složky a nastaví vlastnosti označující, že sestavení bylo zahájeno prostřednictvím NuGetu.
nástroje složce

Verze balíčků starší než 2.3 obsahují pouze složku tsc. Microsoft.TypeScript.targets a TypeScript.Tasks.dll jsou umístěny na kořenové úrovni.

Kořenová úroveň v balíčcích verze 2.3 a novějších obsahuje Microsoft.TypeScript.targets a Microsoft.TypeScript.Default.props. Další podrobnosti o těchto souborech naleznete v tématu MSBuild Konfigurace.

Složka navíc obsahuje tři podsložky:
1. net45
  
  Tato složka obsahuje TypeScript.Tasks.dll a další knihovny DLL, na kterých závisí. Při vytváření projektu na platformě Windows používá nástroj MSBuild knihovny DLL z této složky.
2. netstandard1.3
  
  Tato složka obsahuje jinou verzi TypeScript.Tasks.dll, která se používá při sestavování projektů na počítači s jiným systémem než Windows.
3. tsc
  
  Tato složka obsahuje tsc.js, tsserver.js a všechny soubory závislostí potřebné ke spuštění jako skripty uzlů.
  
  Poznámka
  
  Pokud je sada Visual Studio nainstalovaná, balíček NuGet automaticky převezme verzi node.exe se sadou Visual Studio. V opačném případě musí být na počítači nainstalován Node.js.
  
  Verze starší než 3.1 obsahovaly spustitelný soubor tsc.exe ke spuštění kompilace. Ve verzi 3.1 byl spustitelný soubor odstraněn ve prospěch použití node.exe.

Odebrání výchozích importů

Ve starších projektech ASP.NET Core, které používají formát ve stylu bez sady SDK, možná budete muset některé prvky souboru projektu odebrat.

Pokud pro projekt používáte balíček NuGet pro podporu nástroje MSBuild, soubor projektu nesmí importovat Microsoft.TypeScript.Default.props ani Microsoft.TypeScript.targets. Soubory se naimportují balíčkem NuGet, takže jejich zahrnutí může způsobit nezamýšlené chování.

Klikněte pravým tlačítkem myši na projekt a zvolte Uvolnit projekt.
Klikněte pravým tlačítkem myši na projekt a zvolte Upravit <název souboru projektu>.

Otevře se soubor projektu.

Odeberte odkazy na Microsoft.TypeScript.Default.props a Microsoft.TypeScript.targets.

Importy, které se mají odebrat, vypadají podobně jako následující 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')" />

Sdílet prostřednictvím