Freigeben über

Tutorial: Hinzufügen von TypeScript zu einer vorhandenen ASP.NET Core-App in Visual Studio

  • Artikel

In diesem Tutorial für die Visual Studio-Entwicklung mit ASP.NET Core und TypeScript erstellen Sie eine einfache Webanwendung, fügen etwas TypeScript-Code hinzu und führen dann die App aus.

Wenn Sie Angular oder Vue mit ASP.NET Core nutzen möchten, gilt in Visual Studio 2022 oder höher die Empfehlung, die Vorlagen für ASP.NET Core-Single-Page-Webanwendungen (SPAs) zu verwenden, um eine ASP.NET Core-App mit TypeScript zu erstellen. Weitere Informationen finden Sie in den Visual Studio-Tutorials für Angular oder Vue.

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

  • Erstellen eines ASP.NET Core-Projekts
  • Hinzufügen des NuGet-Pakets für die TypeScript-Unterstützung
  • Hinzufügen von TypeScript-Code
  • Ausführen der App
  • Hinzufügen einer Drittanbieterbibliothek mit npm

Voraussetzungen

Sie müssen Visual Studio und die Workload „ASP.NET-Webentwicklung“ installiert haben.

  • Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

  • Wenn Sie die Workload installieren müssen, Visual Studio aber bereits besitzen, navigieren Sie zu Tools>Tools und Features abrufen…, um den Visual Studio-Installer zu öffnen. Klicken Sie auf die Workload ASP.NET und Webentwicklung, und wählen Sie anschließend Ändern aus.

Erstellen eines neuen ASP.NET Core MVC-Projekts

Visual Studio verwaltet Dateien für eine einzelne Anwendung in einem Projekt. Das Projekt umfasst Quellcode, Ressourcen und Konfigurationsdateien.

Hinweis

Eine Anleitung zum Beginnen mit einem leeren ASP.NET Core-Projekt und zum Hinzufügen eines TypeScript-Front-Ends finden Sie unter ASP.NET Core mit TypeScript.

In diesem Tutorial beginnen Sie mit einem einfachen Projekt, das Code für eine ASP.NET Core MVC-App enthält.

  1. Öffnen Sie Visual Studio. Wenn das Startfenster nicht geöffnet ist, klicken Sie auf Datei >Startfenster.

  2. Wählen Sie im Startfenster Neues Projekt erstellen aus.

  3. Geben Sie im Fenster Neues Projekt erstellen im Suchfeld den Begriff Web-App ein. Wählen Sie als Nächstes C# als Sprache aus.

    Nachdem Sie den Sprachfilter angewendet haben, wählen Sie ASP.NET Core-Webanwendung (Model View Controller) und dann Weiter aus.

    Hinweis

    Wenn Ihnen die Projektvorlage ASP.NET Core-Webanwendung fehlt, müssen Sie die Workload ASP.NET und Webentwicklung hinzufügen. Ausführliche Anweisungen dazu finden Sie in den Voraussetzungen.

  4. Geben Sie im Fenster Neues Projekt konfigurieren im Feld Projektname einen Namen für Ihr Projekt ein. Wählen Sie anschließend Weiter aus.

  1. Wählen Sie das empfohlene Zielframework (.NET 8.0 oder Long-Term Support) und dann Erstellen aus.
  1. Vergewissern Sie sich, dass im Fenster Zusätzliche Informationen im Dropdownmenü Framework die Option .NET 8.0 ausgewählt ist, und wählen Sie dann Erstellen aus.

Visual Studio öffnet Ihr neues Projekt.

Hinzufügen von Code

  1. Klicken Sie im Projektmappen-Explorer (rechter Bereich) mit der rechten Maustaste auf den Projektknoten, und wählen Sie NuGet-Pakete für Projektmappen verwalten aus.

  2. Suchen Sie auf der Registerkarte Durchsuchen nach Microsoft.TypeScript.MSBuild.

  3. Wählen Sie Installieren aus, um das Paket zu installieren.

    Add NuGet package

    Visual Studio fügt das NuGet-Paket unter dem Knoten Abhängigkeiten im Projektmappen-Explorer hinzu.

  4. Klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie Hinzufügen > Neues Element aus. Wählen Sie die TypeScript JSON-Konfigurationsdatei aus, und wählen Sie dann Hinzufügen aus.

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

    Visual Studio fügt die Datei tsconfig.json zum Projektstamm hinzu. Sie können mit dieser Datei für den TypeScript-Compiler Optionen konfigurieren.

  5. Öffnen Sie tsconfig.json und ersetzen Sie den Standardcode durch den folgenden Code:

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

    Die Option outDir gibt den Ausgabeordner für die einfachen JavaScript-Dateien an, die vom TypeScript-Compiler transpiliert werden.

    Diese Konfiguration bietet eine grundlegende Einführung in die Verwendung von TypeScript. In anderen Szenarios, z. B. bei der Verwendung von gulp oder Webpack, möchten Sie vielleicht einen anderen Zwischenspeicherort für die transpilierten JavaScript-Dateien verwenden als wwwwroot/js. Der Speicherort hängt von Ihren Tools und Konfigurationseinstellungen ab.

  6. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektknoten und wählen Sie Hinzufügen > Neuer Ordner aus. Verwenden Sie den Namen scripts für den neuen Ordner.

  7. Klicken Sie mit der rechten Maustaste auf den Ordner scripts und wählen Sie Hinzufügen > Neues Element aus. Wählen Sie die TypeScript-Datei aus, geben Sie den Namen app.ts als Dateinamen ein, und klicken Sie dann auf Hinzufügen.

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

    Visual Studio fügt app.ts zum Ordner scripts hinzu.

  8. Öffnen Sie app.ts und fügen Sie den folgenden TypeScript-Code hinzu.

    function TSButton() {
   let name: string = "Fred";
   document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
   fullName: string;
   constructor(public firstName: string, public middleInitial: string, public lastName: string) {
      this.fullName = firstName + " " + middleInitial + " " + lastName;
   }
}

interface Person {
   firstName: string;
   lastName: string;
}

function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");

    Visual Studio bietet die IntelliSense-Unterstützung für Ihren TypeScript-Code.

    Um dieses Feature zu testen, entfernen Sie .lastName aus der greeter-Funktion, geben Sie den Punkt (.) erneut ein, und beachten Sie die IntelliSense-Updates.

    View IntelliSense

    Wählen Sie lastName aus, um den Nachnamen wieder dem Code hinzuzufügen.

  9. Öffnen Sie den Ordner Views/Home und dann die Datei Index.cshtml.

  10. Fügen Sie den folgenden HTML-Code am Ende der Datei hinzu.

    <div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

  11. Öffnen Sie den Ordner Views/Shared, und öffnen Sie dann die Datei _Layout.cshtml.

  12. Fügen Sie die folgende Skriptreferenz vor dem Aufruf von @RenderSectionAsync("Scripts", required: false) hinzu:

    <script src="~/js/app.js"></script>

  13. Wählen Sie Datei>Alle speichern aus (STRG + UMSCHALT + S), um Ihre Änderungen zu speichern.

Erstellen der Anwendung

  1. Wählen Sie Erstellen > Lösung erstellen aus.

    Obwohl die App automatisch erstellt wird, wenn Sie sie ausführen, wollen wir einen Blick auf etwas werfen, das während des Buildvorgangs geschieht.

  2. Öffnen Sie den Ordner wwwwroot/js, um zwei neue Dateien anzuzeigen: app.js und die Quellzuordnungsdatei app.js.map. Diese Dateien werden vom TypeScript-Compiler generiert.

    Für die Fehlersuche werden Quellzuordnungsdateien benötigt.

Ausführen der Anwendung

  1. Drücken Sie F5 (Debuggen>Debuggen starten), um die Anwendung auszuführen.

    Die App wird daraufhin in einem Browser geöffnet.

    Im Browserfenster wird die Überschrift Willkommen und die Schaltfläche Hier klicken angezeigt.

    ASP.NET Core with TypeScript

  2. Wählen Sie auf Schaltfläche auf, um die von uns in der TypeScript-Datei angegebene Meldung anzuzeigen.

Debuggen der Anwendung

  1. Setzen Sie einen Haltepunkt in der Funktion greeter in app.ts, indem Sie im Code-Editor auf den linken Rand klicken.

    Set a breakpoint

  2. Drücken Sie F5, um die Anwendung auszuführen.

    Möglicherweise müssen Sie auf eine Meldung reagieren, um das Skriptdebuggen zu aktivieren.

    Hinweis

    Für das clientseitige Debuggen von Skripts ist Chrome oder Edge erforderlich.

  3. Wenn die Seite geladen wird, drücken Sie auf Hier klicken.

    Die Anwendung hält am Haltepunkt an. Jetzt können Sie Variablen untersuchen und Debugger-Features verwenden.

Hinzufügen der TypeScript-Unterstützung für eine Drittanbieterbibliothek

  1. Führen Sie die Anweisungen in der npm-Paketverwaltung aus, um eine package.json-Datei zu Ihrem Projekt hinzuzufügen. Dadurch wird die npm-Unterstützung zu Ihrem Projekt hinzugefügt.

    Hinweis

    Für ASP.NET Core-Projekte können Sie auf den Bibliotheks-Manager oder YARN anstelle von npm verwenden, um clientseitige JavaScript- und CSS-Dateien zu installieren.

  2. In diesem Beispiel fügen Sie eine TypeScript-Definitionsdatei für jQuery zu Ihrem Projekt hinzu. Fügen Sie den folgenden Code in Ihre Datei package.json ein.

    "devDependencies": {
  "@types/jquery": "3.5.1"
}

    Durch diesen Code wird die TypeScript-Unterstützung für jQuery hinzugefügt. Die jQuery-Bibliothek selbst ist bereit in der MVC-Projektvorlage enthalten (diese finden Sie im Projektmappen-Explorer unter „wwwroot/lib“). Wenn Sie eine andere Vorlage verwenden, müssen Sie möglicherweise auch das npm-Paket für jQuery einfügen.

  3. Wenn das Paket nicht im Projektmappen-Explorer installiert ist, klicken Sie mit der rechten Maustaste auf den npm-Knoten, und wählen Sie dann Pakete wiederherstellen aus.

    Hinweis

    In einigen Szenarios gibt der Projektmappen-Explorer möglicherweise an, dass ein npm-Paket nicht mit der Datei package.json synchron ist. Dies liegt an einem bekannten Fehler, der hier beschrieben wird. Beispielsweise wird das Paket möglicherweise als nicht installiert angezeigt, obwohl es installiert ist. In den meisten Fällen können Sie den Projektmappen-Explorer aktualisieren, indem Sie die Datei package.json löschen, Visual Studio neu starten und die Datei package.json wie zuvor im Artikel beschrieben wieder hinzufügen.

  4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Skriptordner, und wählen Sie dann Hinzufügen>Neues Element aus.

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

  5. Wählen Sie TypeScript-Datei aus, geben Sie library.ts ein, und klicken Sie dann auf Hinzufügen.

  6. Fügen Sie den folgenden Code in die Datei library.ts ein:

    var jqtest = {
  showMsg: function (): void {
     let v: any = jQuery.fn.jquery.toString();
     let content: any = $("#ts-example-2")[0].innerHTML;
     alert(content.toString() + " " + v + "!!");
     $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
  }
};

jqtest.showMsg();

    Der Einfachheit halber zeigt dieser Code eine Nachricht mithilfe von jQuery sowie eine Warnung an.

    Da Sie nun TypeScript-Typdefinitionen für jQuery hinzugefügt haben, erhalten Sie IntelliSense-Unterstützung für jQuery-Objekte, wenn Sie wie im folgenden Bild gezeigt nach einem jQuery-Objekt einen Punkt (.) eingeben.

    Screenshot that shows Intellisense results for the J Query example.

  7. Fügen Sie library.js zu den Skriptverweisen in der Datei _Layout.cshtml hinzu.

    <script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>

  8. Fügen Sie den folgenden HTML-Code am Ende der Datei Index.cshtml hinzu.

    <div>
  <p id="ts-example-2">jQuery version is:</p>
</div>

  9. Drücken Sie F5 (Debuggen>Debuggen starten), um die Anwendung auszuführen.

    Daraufhin wird die App im Browser geöffnet.

    Wählen Sie in der Warnung OK aus, damit die Seite aktualisiert und jQuery version is: 3.3.1!! angezeigt wird.

    Screenshot that shows the J Query example.

Nächste Schritte

Möglicherweise möchten Sie weitere Details über die Verwendung von TypeScript mit ASP.NET Core erfahren. Wenn Sie an der Angular-Programmierung in Visual Studio interessiert sind, können Sie den Angular-Sprachdienst für Visual Studio verwenden.

ASP.NET Core und TypeScript

Angular-Sprachdienst für Visual Studio