Kompilieren von TypeScript-Code (ASP.NET Core)

2025-06-12

Verwenden Sie das TypeScript NuGet-Paket, um TypeScript-Unterstützung zu Ihren ASP.NET Core-Projekten hinzuzufügen. Ab Visual Studio 2019 wird empfohlen, das NuGet-Paket anstelle des TypeScript SDK zu verwenden. Das TypeScript NuGet-Paket bietet eine größere Portabilität auf verschiedenen Plattformen und Umgebungen.

Bei ASP.NET Core-Projekten besteht eine häufige Verwendung für das NuGet-Paket darin, TypeScript mithilfe der .NET Core CLI zu kompilieren. In .NET-Szenarien ist das NuGet-Paket die bevorzugte Option, und es ist die einzige Möglichkeit, die TypeScript-Kompilierung mithilfe von .NET Core CLI-Befehlen wie dotnet build und dotnet publishzu aktivieren. Auch bei der MSBuild-Integration mit ASP.NET Core und TypeScript sollten Sie das NuGet-Paket auswählen.

Wichtig

Verwenden Sie für Projekte, die auf dem JavaScript Project System (JSPS)-oder .esproj- Projekten basieren, das npm-Paket anstelle von NuGet, um die TypeScript-Unterstützung hinzuzufügen.

Hinzufügen der TypeScript-Unterstützung mit NuGet

Das TypeScript NuGet-Paket fügt TypeScript-Unterstützung hinzu. Wenn das NuGet-Paket für TypeScript 3.2 oder höher in Ihrem Projekt installiert ist, wird die entsprechende Version des TypeScript-Sprachdiensts im Editor geladen.

Falls Visual Studio installiert ist, wird das mitgelieferte node.exe von Visual Studio automatisch erkannt. Wenn Sie Node.js nicht installiert haben, empfehlen wir, die LTS-Version von der Node.js-Website zu installieren.

Öffnen Sie Ihr ASP.NET Core-Projekt in Visual Studio.
Im Projektmappen-Explorer (rechter Bereich) Klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie "NuGet-Pakete verwalten"aus. Suchen Sie auf der Registerkarte Durchsuchen nach Microsoft.TypeScript.MSBuild, und klicken Sie dann auf Installieren, um das Paket zu installieren.

hinzufügen

Visual Studio fügt das NuGet-Paket unter dem Knoten Abhängigkeiten im Projektmappen-Explorer hinzu. Der folgende Paketverweis wird Ihrer Datei *.csproj hinzugefügt.
```
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.8.3">
   <PrivateAssets>all</PrivateAssets>
   <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
```
Klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie Hinzufügen > Neues Elementaus. Wählen Sie die TypeScript JSON-Konfigurationsdateiaus, und klicken Sie dann auf Hinzufügen.

Wenn nicht alle Elementvorlagen angezeigt werden, wählen Sie Alle Vorlagen anzeigenaus, und wählen Sie dann die Elementvorlage aus.

Visual Studio fügt die tsconfig.json Datei zum Projektstamm hinzu. Sie können diese Datei verwenden, um Optionen für den TypeScript-Compiler zu konfigurieren.
Öffnen Sie tsconfig.json, und aktualisieren Sie, um die gewünschten Compileroptionen festzulegen.

Verwenden Sie das folgende Beispiel, das eine einfache tsconfig.json Datei zeigt.
```
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
In diesem Beispiel:
- einschließen teilt dem Compiler mit, wo TypeScript-Dateien (*.ts) gefunden werden sollen.
- outDir Option gibt den Ausgabeordner für die einfachen JavaScript-Dateien an, die vom TypeScript-Compiler transpiliert werden.
- option "sourceMap" gibt an, ob der Compiler sourceMap- Dateien generiert.
Die vorherige Konfiguration bietet nur eine grundlegende Einführung in die Konfiguration von TypeScript. Weitere Informationen zu anderen Optionen finden Sie unter tsconfig.json.

Erstellen der Anwendung

Fügen Sie TypeScript (.ts) oder TypeScript JSX (TSX-)-Dateien zu Ihrem Projekt hinzu, und fügen Sie dann TypeScript-Code hinzu. Verwenden Sie für ein einfaches Beispiel für TypeScript den folgenden Code:
```
let message: string = 'Hello World';
console.log(message);
```
Wenn Sie ein älteres Projekt im Nicht-SDK-Stil verwenden, folgen Sie den Anweisungen unter Entfernen von Standardimporten vor dem Erstellen.
Wählen Sie Erstellen > Projektmappe erstellen aus.

Obwohl die App beim Ausführen automatisch erstellt wird, sollten wir uns etwas ansehen, das während des Buildvorgangs geschieht:

Wenn Sie Quellzuordnungsdateien generiert haben, öffnen Sie den in der outDir-Option angegebenen Ordner. Dort finden Sie die generierten *.js-Dateien sowie die generierten *js.map-Dateien.

Quellzuordnungsdateien sind für das Debuggen erforderlich.
Wenn Sie jedes Mal kompilieren möchten, wenn Sie das Projekt speichern, verwenden Sie die Option compileOnSave in tsconfig.json.
```
{
   "compileOnSave":  true,
   "compilerOptions": {
   }
}
```

Ein Beispiel für die Verwendung von gulp mit dem Task Runner zum Erstellen Ihrer App finden Sie unter ASP.NET Core und TypeScript.

Wenn Probleme auftreten, bei denen Visual Studio eine Version von Node.js oder ein Drittanbietertool verwendet, das sich von der erwarteten Version unterscheidet, müssen Sie möglicherweise den Pfad für Visual Studio festlegen, der verwendet werden soll. Wählen Sie Tools>Optionen aus. Wählen Sie unter Projekte und LösungenWebpaketverwaltung>Externe Webtoolsaus.

Ausführen der Anwendung

Drücken Sie F5, oder wählen Sie oben im Fenster die Schaltfläche "Start" aus.

Details zur NuGet-Paketstruktur

Microsoft.TypeScript.MSBuild.nupkg enthält zwei Hauptordner:

Ordner build

Zwei Dateien befinden sich in diesem Ordner. Beide sind Einstiegspunkte für die TypeScript-Hauptzieldatei bzw. die Eigenschaftendatei.
1. Microsoft.TypeScript.MSBuild.targets
  
  Diese Datei legt Variablen fest, die die Laufzeitplattform angeben, z. B. einen Pfad zu TypeScript.Tasks.dll, bevor Microsoft.TypeScript.targets aus dem ordner Tools importiert werden.
2. Microsoft.TypeScript.MSBuild.props
  
  Diese Datei importiert Microsoft.TypeScript.Default.props aus den Tools Ordner und legt Eigenschaften fest, die angeben, dass der Build über NuGet initiiert wurde.
Werkzeuge Ordner

Paketversionen vor 2.3 enthalten nur einen tsc-Ordner. Microsoft.TypeScript.targets und TypeScript.Tasks.dll befinden sich auf der Stammebene.

In Paketversionen 2.3 und höher enthält die Stammebene Microsoft.TypeScript.targets und Microsoft.TypeScript.Default.props. Weitere Informationen zu diesen Dateien finden Sie unter MSBuild Configuration.

Darüber hinaus enthält der Ordner drei Unterordner:
1. net45
  
  Dieser Ordner enthält TypeScript.Tasks.dll und andere DLLs, von denen er abhängt. Beim Erstellen eines Projekts auf einer Windows-Plattform verwendet MSBuild die DLLs aus diesem Ordner.
2. netstandard1.3
  
  Dieser Ordner enthält eine weitere Version von TypeScript.Tasks.dll, die beim Erstellen von Projekten auf einem Nicht-Windows-Computer verwendet wird.
3. tsc
  
  Dieser Ordner enthält tsc.js, tsserver.js und alle Abhängigkeitsdateien, die zum Ausführen als Knotenskripts erforderlich sind.
  
  Anmerkung
  
  Wenn Visual Studio installiert ist, nimmt das NuGet-Paket automatisch die Version von node.exe gebündelt mit Visual Studio auf. Andernfalls muss Node.js auf dem Computer installiert sein.
  
  Versionen vor 3.1 enthielten eine tsc.exe ausführbare Datei zum Ausführen der Kompilierung. In Version 3.1 wurde die ausführbare Datei zugunsten von node.exe entfernt.

Entfernen von Standardimporten

In älteren ASP.NET Core-Projekten, die das -Format im Nicht-SDK-Stilverwenden, müssen Sie möglicherweise einige Elemente der Projektdatei entfernen.

Wenn Sie das NuGet-Paket für die MSBuild-Unterstützung für ein Projekt verwenden, darf die Projektdatei weder importieren Microsoft.TypeScript.Default.props noch Microsoft.TypeScript.targets. Die Dateien werden vom NuGet-Paket importiert, sodass das getrennte Einfügen unerwünschtes Verhalten verursachen kann.

Klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie Projekt entladen aus.
Klicken Sie mit der rechten Maustaste auf das Projekt, und wählen Sie Projektdateinamen bearbeiten <>aus.

Die Projektdatei wird geöffnet.

Entfernen Sie Verweise auf Microsoft.TypeScript.Default.props und Microsoft.TypeScript.targets.

Die zu entfernenden Importe sehen ähnlich aus wie das folgende 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')" />

Freigeben über