Delen via

Zelfstudie: TypeScript toevoegen aan een bestaande ASP.NET Core-app in Visual Studio

  • Artikel

In deze zelfstudie voor Visual Studio-ontwikkeling met behulp van ASP.NET Core en TypeScript maakt u een eenvoudige webtoepassing, voegt u enkele TypeScript-code toe en voert u vervolgens de app uit.

Als u in Visual Studio 2022 en hoger Angular of Vue wilt gebruiken met ASP.NET Core, is het raadzaam de ASP.NET SPA-sjablonen (Core Single Page Application) te gebruiken om een ASP.NET Core-app te maken met TypeScript. Zie de Visual Studio-zelfstudies voor Angular of Vuevoor meer informatie.

Als u Visual Studio nog niet hebt geïnstalleerd, gaat u naar de Visual Studio-downloadpagina pagina om deze gratis te installeren.

In deze zelfstudie leert u het volgende:

  • Een ASP.NET Core-project maken
  • Het NuGet-pakket voor TypeScript-ondersteuning toevoegen
  • Een TypeScript-code toevoegen
  • De app uitvoeren
  • Een bibliotheek van derden toevoegen met npm

Voorwaarden

Je moet Visual Studio en de werkbelasting voor ASP.NET-webontwikkeling geïnstalleerd hebben.

  • Als u Visual Studio nog niet hebt geïnstalleerd, gaat u naar de Visual Studio-downloadpagina pagina om deze gratis te installeren.

  • Als u de workload wilt installeren maar Visual Studio al hebt, gaat u naar Tools>Hulpprogramma's en onderdelen ophalen... om het Installatieprogramma van Visual Studio te openen. Kies de ASP.NET- en webontwikkelingsworkload en selecteer vervolgens Wijzigen.

Een nieuw ASP.NET Core MVC-project maken

Visual Studio beheert bestanden voor één toepassing in een project. Het project bevat broncode, resources en configuratiebestanden.

Notitie

Als u wilt beginnen met een leeg ASP.NET Core-project en een TypeScript-front-end wilt toevoegen, raadpleegt u in plaats daarvan ASP.NET Core met TypeScript-.

In deze zelfstudie begint u met een eenvoudig project met code voor een ASP.NET Core MVC-app.

  1. Open Visual Studio. Als het startvenster niet is geopend, kiest u Bestand>Startvenster.

  2. Kies in het startvenster Een nieuw project maken.

  3. Voer in het venster Een nieuw project maken in het zoekvak web-app in. Kies vervolgens C# als taal.

    Nadat u het taalfilter hebt toegepast, kiest u ASP.NET Core Web App (Model-View-Controller)en selecteert u vervolgens Volgende.

    Notitie

    Als u de ASP.NET Core Web Application projectsjabloon niet ziet, moet u de ASP.NET- en webontwikkelingswerklast toevoegen. Zie de Vereistenvoor gedetailleerde instructies.

  4. Voer in het venster Uw nieuwe project configureren een naam in voor uw project in het vak Projectnaam. Selecteer vervolgens Volgende.

  1. Selecteer het aanbevolen doelframework (.NET 8.0 of langetermijnondersteuning) en selecteer vervolgens Maken.
  1. Controleer in het venster Aanvullende informatie of .NET 8.0 is geselecteerd in de vervolgkeuzelijst Framework, en selecteer vervolgens Maken.

Visual Studio opent uw nieuwe project.

Code toevoegen

  1. Klik in Solution Explorer (rechterdeelvenster) met de rechtermuisknop op het projectknooppunt en selecteer NuGet-pakketten voor oplossingen beheren.

  2. Zoek in het tabblad Bladeren naar Microsoft.TypeScript.MSBuild.

  3. Selecteer Installeren om het pakket te installeren.

    NuGet-pakket toevoegen

    Visual Studio voegt het NuGet-pakket toe onder de node Dependencies in Solution Explorer.

  4. Klik met de rechtermuisknop op het projectknooppunt en selecteer Add > New Item. Kies het TypeScript JSON-configuratiebestanden selecteer toevoegen.

    Als u niet alle itemsjablonen ziet, selecteert u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.

    Visual Studio voegt het tsconfig.json-bestand toe aan de hoofdmap van het project. U kunt dit bestand gebruiken om opties te configureren voor de TypeScript-compiler.

  5. Open tsconfig.json en vervang de standaardcode door de volgende code:

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

    De outDir optie geeft de uitvoermap op voor de gewone JavaScript-bestanden die de TypeScript-compiler transpileert.

    Deze configuratie biedt een eenvoudige inleiding tot het gebruik van TypeScript. In andere scenario's, zoals bij het gebruik van gulp of webpack, wilt u mogelijk een andere tussenliggende locatie voor de getranspileerde JavaScript-bestanden in plaats van wwwroot/js. De locatie is afhankelijk van uw hulpprogramma's en configuratievoorkeuren.

  6. Klik in Solution Explorer met de rechtermuisknop op het projectknooppunt en selecteer > Nieuwe map toevoegen. Gebruik de naam scripts voor de nieuwe map.

  7. Klik met de rechtermuisknop op de scripts map en selecteer Add > New Item. Kies het TypeScript-bestand, typ de naam app.ts voor de bestandsnaam en selecteer toevoegen.

    Als u niet alle itemsjablonen ziet, selecteert u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.

    Visual Studio voegt app.ts toe aan de scripts map.

  8. Open app.ts en voeg de volgende TypeScript-code toe.

    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 biedt IntelliSense-ondersteuning voor uw TypeScript-code.

    Als u deze functie wilt proberen, verwijdert u .lastName uit de functie greeter, voert u de periode (.) opnieuw in en ziet u dat de IntelliSense-updates worden bijgewerkt.

    IntelliSense- weergeven

    Selecteer lastName om de achternaam weer toe te voegen aan de code.

  9. Open de map Views/Home, en open vervolgens Index.cshtml.

  10. Voeg de volgende HTML-code toe aan het einde van het bestand.

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

  11. Open de map Views/Shared en vervolgens _Layout.cshtml .

  12. Voeg de volgende scriptreferentie toe vóór de aanroep naar @RenderSectionAsync("Scripts", required: false):

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

  13. Selecteer Bestand>Alle opslaan (Ctrl + Shift + S) om uw wijzigingen op te slaan.

De toepassing bouwen

  1. Selecteer Build > Build Solution.

    Hoewel de app automatisch wordt gebouwd wanneer u deze uitvoert, willen we kijken naar iets wat er gebeurt tijdens het buildproces.

  2. Open de map wwwroot/js om twee nieuwe bestanden te bekijken: app.js en het bronoverzichtsbestand, app.js.map. De TypeScript-compiler genereert deze bestanden.

    Bronkaartbestanden zijn vereist voor foutopsporing.

De toepassing uitvoeren

  1. Druk op F5 (Debug>Start Debugging) om de toepassing uit te voeren.

    De app wordt geopend in een browser.

    In het browservenster ziet u de kop Welkom en de knop Klik op mij.

    ASP.NET Core met TypeScript-

  2. Selecteer de knop om het bericht weer te geven dat we in het TypeScript-bestand hebben opgegeven.

Fouten opsporen in de toepassing

  1. Stel een onderbrekingspunt in de functie greeter in app.ts door in de linkermarge in de code-editor te klikken.

    een onderbrekingspunt instellen

  2. Druk op F5- om de toepassing uit te voeren.

    Mogelijk moet u reageren op een bericht om scriptopsporing in te schakelen.

    Notitie

    Chrome of Edge is vereist voor foutopsporing aan de clientzijde.

  3. Wanneer de pagina wordt geladen, drukt u op Klik op mij.

    De toepassing wordt onderbroken op het onderbrekingspunt. U kunt nu variabelen inspecteren en functies voor foutopsporingsprogramma's gebruiken.

TypeScript-ondersteuning toevoegen voor een bibliotheek van derden

  1. Volg de instructies in npm-pakketbeheer om een package.json-bestand toe te voegen aan uw project. Met deze taak wordt npm-ondersteuning toegevoegd aan uw project.

    Notitie

    Voor ASP.NET Core-projecten kunt u ook Library Manager of yarn gebruiken in plaats van npm om JavaScript- en CSS-bestanden aan de clientzijde te installeren.

  2. Voeg in dit voorbeeld een TypeScript-definitiebestand voor jQuery toe aan uw project. Neem de volgende code op in het package.json-bestand.

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

    Met deze code wordt TypeScript-ondersteuning toegevoegd voor jQuery. De jQuery-bibliotheek zelf is al opgenomen in de MVC-projectsjabloon (kijk onder wwwroot/lib in Solution Explorer). Als u een andere sjabloon gebruikt, moet u mogelijk ook het jquery NPM-pakket opnemen.

  3. Als het pakket in Solution Explorer niet is geïnstalleerd, klikt u met de rechtermuisknop op het npm-knooppunt en kiest u Pakketten herstellen.

    Notitie

    In sommige scenario's kan Solution Explorer erop wijzen dat een npm-pakket niet is gesynchroniseerd met package.json vanwege een bekend probleem dat hier wordt beschreven. Het pakket kan bijvoorbeeld worden weergegeven als niet geïnstalleerd wanneer het is geïnstalleerd. In de meeste gevallen kunt u Solution Explorer bijwerken door package.jsonte verwijderen, Visual Studio opnieuw te starten en het package.json-bestand opnieuw toe te voegen, zoals eerder in dit artikel is beschreven.

  4. Klik in Solution Explorer met de rechtermuisknop op de map met scripts en kies Toevoegen>Nieuw item.

    Als u niet alle itemsjablonen ziet, kiest u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.

  5. Kies TypeScript-bestand, typ library.tsen kies toevoegen.

  6. Voeg in library.tsde volgende code toe.

    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();

    Ter vereenvoudiging geeft deze code een bericht weer met behulp van jQuery en een waarschuwing.

    Wanneer TypeScript-typedefinities voor jQuery zijn toegevoegd, krijgt u intelliSense-ondersteuning voor jQuery-objecten wanneer u een punt (.) invoert na een jQuery-object, zoals hier wordt weergegeven.

    Schermopname met IntelliSense-resultaten voor het J-queryvoorbeeld.

  7. Werk in _Layout.cshtmlde scriptverwijzingen bij om library.jsop te nemen.

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

  8. Voeg in Index.cshtmlde volgende HTML toe aan het einde van het bestand.

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

  9. Druk op F5 (Debug>Start Debugging) om de toepassing uit te voeren.

    De app wordt geopend in de browser.

    Selecteer OK in de waarschuwing om de pagina te zien die is bijgewerkt naar jQuery-versie is: 3.3.1!!.

    Schermopname van het J-queryvoorbeeld.

Volgende stappen

Mogelijk wilt u meer informatie over het gebruik van TypeScript met ASP.NET Core. Als u geïnteresseerd bent in Angular-programmering in Visual Studio, kunt u de Angular-serviceextensie gebruiken voor Visual Studio.

ASP.NET Core- en TypeScript-

Angular-taalservice-extensie