Freigeben über

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

  • Artikel

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

Wenn Sie In Visual Studio 2022 und höher Angular oder Vue mit ASP.NET Core verwenden möchten, empfiehlt es sich, die ASP.NET Core Single Page Application (SPA)-Vorlagen zum Erstellen einer ASP.NET Core-App mit TypeScript zu verwenden. Weitere Informationen finden Sie in den Visual Studio-Lernprogrammen für Angular- oder Vue-.

Wenn Sie Visual Studio noch nicht installiert haben, wechseln Sie zur Visual Studio-Downloads Seite, um es kostenlos zu installieren.

In diesem Lernprogramm erfahren Sie, wie Sie:

  • 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 mithilfe von npm

Voraussetzungen

Sie müssen Visual Studio sowie die ASP.NET-Webentwicklungsarbeitslast installiert haben.

  • Wenn Sie Visual Studio noch nicht installiert haben, wechseln Sie zur Visual Studio-Downloads Seite, um es kostenlos zu installieren.

  • Wenn Sie die Workload installieren müssen, aber bereits über Visual Studio verfügen, wechseln Sie zu Tools>Abrufen von Tools und Features..., um das Visual Studio-Installationsprogramm zu öffnen. Wählen Sie die Workload ASP.NET und Webentwicklung aus, 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.

Anmerkung

Wenn Sie mit einem leeren ASP.NET Core-Projekt beginnen und ein TypeScript-Frontend hinzufügen möchten, lesen Sie stattdessen ASP.NET Core mit TypeScript-.

In diesem Lernprogramm 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, wählen Sie Datei>Startfensteraus.

  2. Wählen Sie im Startfenster Neues Projekt erstellenaus.

  3. Geben Sie im Fenster Neues Projekt erstellen im Suchfeld 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 Web App (Model-View-Controller)aus, und wählen Sie dann Nextaus.

    Anmerkung

    Wenn die Projektvorlage ASP.NET Core Web Application nicht angezeigt wird, müssen Sie die Workload "ASP.NET und Webentwicklung" hinzufügen. Ausführliche Anweisungen finden Sie unter den Voraussetzungen.

  4. Geben Sie im Fenster Konfigurieren des neuen Projekts einen Namen für Ihr Projekt im Feld Projektnamen ein. Wählen Sie dann Weiteraus.

  1. Wählen Sie das empfohlene Zielframework (.NET 8.0 oder Langzeitunterstützung) und anschließend Createaus.
  1. Stellen Sie im Fenster Zusätzliche Informationen sicher, dass .NET 8.0- im Dropdownmenü Framework ausgewählt ist, und wählen Sie dann Erstellenaus.

Visual Studio öffnet Ihr neues Projekt.

Hinzufügen von Code

  1. Klicken Sie im Projektmappen-Explorer (rechten Bereich) mit der rechten Maustaste auf den Projektknoten, und wählen Sie NuGet-Pakete lösungsübergreifend verwaltenaus.

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

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

    NuGet-Paket- hinzufügen

    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 > Neues Element hinzufügenaus. 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 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.

  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": "ES6",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

    Die option outDir gibt den Ausgabeordner für die einfachen JavaScript-Dateien an, die der TypeScript-Compiler transpiliert.

    Diese Konfiguration bietet eine grundlegende Einführung in die Verwendung von TypeScript. In anderen Szenarien, z. B. bei verwendung von gulp oder webpack, möchten Sie möglicherweise einen anderen Zwischenspeicherort für die transpilierten JavaScript-Dateien anstelle von wwwroot/js. Der Standort 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 Skripts für den neuen Ordner.

  7. Klicken Sie mit der rechten Maustaste auf die Skripts Ordner, und wählen Sie > Neues Element hinzufügenaus. Wählen Sie die TypeScript Fileaus, geben Sie den Namen app.ts für den Dateinamen ein, und wählen Sie dann Addaus.

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

    Visual Studio fügt app.ts zum Ordner Skripts 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 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.

    Anzeigen von IntelliSense anzeigen

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

  9. Öffnen Sie den Ordner Views/Home, und öffnen Sie dann Index.cshtml.

  10. Fügen Sie am Ende der Datei den folgenden HTML-Code 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 _Layout.cshtml.

  12. Fügen Sie den folgenden Skriptverweis vor dem Aufruf von @RenderSectionAsync("Scripts", required: false)hinzu:

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

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

Erstellen der Anwendung

  1. 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.

  2. Öffnen Sie den Ordner wwwroot/js, um zwei neue Dateien anzuzeigen: app.js und die Quellzuordnungsdatei, app.js.map. Der TypeScript-Compiler generiert diese Dateien.

    Quellzuordnungsdateien sind für das Debuggen erforderlich.

Ausführen der Anwendung

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

    Die App wird in einem Browser geöffnet.

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

    ASP.NET Core mit TypeScript-

  2. Wählen Sie die Schaltfläche aus, um die Meldung anzuzeigen, die wir in der TypeScript-Datei angegeben haben.

Debuggen der Anwendung

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

    Festlegen eines Haltepunkts

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

    Möglicherweise müssen Sie auf eine Nachricht antworten, um das Skriptdebugging zu aktivieren.

    Anmerkung

    Chrome oder Edge ist für das clientseitige Skriptdebugging 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 überprüfen und Debuggerfeatures verwenden.

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

  1. Folgen Sie den Anweisungen in npm-Paketverwaltung, um Ihrem Projekt eine package.json Datei hinzuzufügen. Dieser Vorgang fügt ihrem Projekt npm-Unterstützung hinzu.

    Anmerkung

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

  2. Fügen Sie in diesem Beispiel ihrem Projekt eine TypeScript-Definitionsdatei für jQuery hinzu. Fügen Sie den folgenden Code in die datei package.json ein.

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

    Dieser Code fügt TypeScript-Unterstützung für jQuery hinzu. Die jQuery-Bibliothek selbst ist bereits in der MVC-Projektvorlage enthalten (suchen Sie unter wwwroot/lib im Projektmappen-Explorer). Wenn Sie eine andere Vorlage verwenden, müssen Sie möglicherweise auch das jquery npm-Paket einschließen.

  3. Wenn das Paket im Lösung-Explorer nicht installiert ist, klicken Sie mit der rechten Maustaste auf den npm-Knoten, und wählen Sie Pakete wiederherstellenaus.

    Anmerkung

    In einigen Szenarios gibt der Projektmappen-Explorer möglicherweise an, dass ein npm-Paket nicht mit package.json synchron ist. Dies liegt an einem bekannten Fehler, der hier beschrieben wird. Beispielsweise kann das Paket bei der Installation als nicht installiert angezeigt werden. In den meisten Fällen können Sie den Projektmappen-Explorer aktualisieren, indem Sie package.jsonlöschen, Visual Studio neu starten und die package.json-Datei wie weiter oben in diesem Artikel beschrieben erneut hinzufügen.

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

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

  5. Wählen Sie TypeScript Fileaus, geben Sie library.tsein, und wählen Sie Addaus.

  6. Fügen Sie in library.tsden folgenden Code hinzu.

    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 mit jQuery und einer Warnung an.

    Nachdem TypeScript-Typdefinitionen für jQuery hinzugefügt wurden, erhalten Sie IntelliSense-Unterstützung für jQuery-Objekte, wenn Sie einen Punkt (.) nach einem jQuery-Objekt eingeben, wie hier gezeigt.

    Screenshot mit IntelliSense-Ergebnissen für das J Query-Beispiel.

  7. Aktualisieren Sie in _Layout.cshtml-die Skriptverweise so, dass sie library.jsenthalten.

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

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

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

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

    Die App wird im Browser geöffnet.

    Wählen Sie OK in der Warnung aus, um anzuzeigen, dass die Seite auf jQuery-Version aktualisiert wurde: 3.3.1!!.

    Screenshot, der das J Query-Beispiel zeigt.

Nächste Schritte

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

ASP.NET Core und TypeScript

Angular-Sprachdiensterweiterung