Oktatóanyag: TypeScript hozzáadása meglévő ASP.NET Core-alkalmazáshoz a Visual Studióban

Ebben az oktatóanyagban a Visual Studio ASP.NET Core és TypeScript használatával történő fejlesztéséhez létrehoz egy egyszerű webalkalmazást, hozzáad néhány TypeScript-kódot, majd futtatja az alkalmazást.

A Visual Studio 2022-es és újabb verzióiban, ha az Angulart vagy a Vue-t szeretné használni ASP.NET Core-val, javasoljuk, hogy a ASP.NET Core Egyoldalas alkalmazás (SPA) sablonjaival hozzon létre egy ASP.NET Core-alkalmazást TypeScripttel. További információkért tekintse meg a Visual Studio-oktatóanyagokban az Angular vagy a Vuerészleteket.

Ha még nem telepítette a Visual Studiót, lépjen a Visual Studio letöltési lapjára, és telepítse ingyenesen.

Ebben az oktatóanyagban a következőket sajátíthatja el:

ASP.NET Core-projekt létrehozása
A NuGet-csomag hozzáadása TypeScript-támogatáshoz
TypeScript-kód hozzáadása
Az alkalmazás futtatása
Külső kódtár hozzáadása npm használatával

Előfeltételek

Telepítve kell lennie a Visual Studio-nak és a ASP.NET webfejlesztési számítási feladatnak.

Ha még nem telepítette a Visual Studiót, lépjen a Visual Studio letöltési lapjára, és telepítse ingyenesen.
Ha telepítenie kell a munkát, de már van Visual Studio a számítógépén, lépjen az Eszközök>lehetőséghez, és válassza az Eszközök és funkciók elérése... a Visual Studio Installer megnyitásához. Válassza ki a ASP.NET és a webfejlesztési munkaterhelést, majd válassza a módosítás lehetőségét.

Új ASP.NET Core MVC-projekt létrehozása

A Visual Studio egyetlen alkalmazás fájljait kezeli egy projektben. A projekt forráskódot, erőforrásokat és konfigurációs fájlokat tartalmaz.

Jegyzet

Ha egy üres ASP.NET Core-projekttel szeretne kezdeni és hozzáadni egy TypeScript-webes felületet, tekintse meg a ASP.NET Core TypeScript-tel példát.

Ebben az oktatóanyagban egy egyszerű projekttel kezdődik, amely egy ASP.NET Core MVC-alkalmazás kódját tartalmazza.

Nyissa meg a Visual Studiót. Ha a kezdőablak nincs megnyitva, válassza Fájl>Ablak indításalehetőséget.
A kezdési ablakban válassza az Új projekt létrehozásalehetőséget.
Az Új projekt létrehozása ablakban írja be webalkalmazás a keresőmezőbe. Ezután válassza C# nyelvként.

A nyelvi szűrő alkalmazása után válassza ASP.NET Core Web App (Model-View-Controller), majd válassza a Továbblehetőséget.

Jegyzet

Ha nem látja a ASP.NET Core Web Application projektsablont, hozzá kell adnia az ASP.NET és webfejlesztési munkaterületet. Részletes útmutatásért lásd az előfeltételek.
A Az új projekt konfigurálása ablakban adja meg a projekt nevét a Projektnév mezőben. Ezután válassza Továbblehetőséget.

Válassza ki az ajánlott cél keretrendszert (.NET 8.0 vagy Hosszú távú támogatás), majd válassza a létrehozása lehetőséget.

A További információk ablakban győződjön meg arról, hogy .NET 8.0 van kiválasztva a Keretrendszer legördülő menüben, majd válassza a létrehozása lehetőséget.

A Visual Studio megnyitja az új projektet.

Kód hozzáadása

A Megoldáskezelőben (jobb oldali ablaktáblán) kattintson a jobb gombbal a projektcsomópontra, és válassza a Megoldáshoz készült NuGet-csomagok kezeléselehetőséget.
A Tallózás lapon keresse meg Microsoft.TypeScript.MSBuild.
A csomag telepítéséhez válassza a Telepítése lehetőséget.

A Visual Studio hozzáadja a NuGet-csomagot a Megoldáskezelő Függőségek csomópontjához.
Kattintson a jobb gombbal a projektcsomópontra, és válassza > Új elem hozzáadásalehetőséget. Válassza ki a TypeScript JSON-konfigurációs fájl, majd válassza ki a hozzáadásalehetőséget.

Ha nem látja az összes elemsablont, válassza Az összes sablon megjelenítéselehetőséget, majd válassza ki az elemsablont.

A Visual Studio hozzáadja a tsconfig.json fájlt a projekt gyökeréhez. Ezzel a fájllal konfigurálhatja a TypeScript-fordítóhoz beállításokat.
Nyissa meg tsconfig.json, és cserélje le az alapértelmezett kódot a következő kódra:
```
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}
```
A outDir beállítás megadja a TypeScript fordító által lefordított egyszerű JavaScript-fájlok kimeneti mappáit.

Ez a konfiguráció alapvető bevezetést nyújt a TypeScript használatához. Más helyzetekben, például gulp vagy webpackhasználatakor előfordulhat, hogy a wwwroot/jshelyett más köztes helyet szeretne a lefordított JavaScript-fájlokhoz. A hely az eszközöktől és a konfigurációs beállításoktól függ.
A Megoldáskezelőben kattintson a jobb gombbal a projektcsomópontra, és válassza a > Új mappa hozzáadásalehetőséget. Használja az új mappa nevét szkriptek.
Kattintson a jobb gombbal a szkriptek mappára, és válassza a Hozzáadás > Új elemlehetőséget. Válassza ki a TypeScript-fájlt, írja be a app.ts fájlnevet, majd válassza a Hozzáadáslehetőséget.

Ha nem látja az összes elemsablont, válassza Az összes sablon megjelenítéselehetőséget, majd válassza ki az elemsablont.

A Visual Studio hozzáadja a app.ts-t a szkriptek mappájához.

Nyissa meg app.ts, és adja hozzá a következő TypeScript-kódot.

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

A Visual Studio IntelliSense-támogatást biztosít a TypeScript-kódhoz.

A funkció kipróbálásához távolítsa el .lastName a greeter függvényből, ismételje meg az időszakot (.), és figyelje meg az IntelliSense frissítéseit.

IntelliSense megtekintése

Válassza a lastName lehetőséget, ha vissza szeretné adni a vezetéknevet a kódhoz.

Nyissa meg a Nézetek/Kezdőlap mappát, majd nyissa meg Index.cshtml.

Adja hozzá a következő HTML-kódot a fájl végéhez.

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

Nyissa meg a Nézetek/Megosztott mappát, majd nyissa meg a _Layout.cshtml.
Adja hozzá a következő szkripthivatkozást a @await RenderSectionAsync("Scripts", required: false)hívása előtt:
```
<script src="~/js/app.js"></script>
```
A módosítások mentéséhez válassza Fájl>Az összes mentése (Ctrl + Shift + S) lehetőséget.

Az alkalmazás létrehozása

Válassza a Build > Build megoldásopciót.

Bár az alkalmazás automatikusan buildel, amikor futtatja, szeretnénk megnézni, hogy mi történik a buildelési folyamat során.
Nyissa meg a wwwroot/js mappát két új fájl megtekintéséhez: app.js és a forrástérképfájlt, app.js.map. A TypeScript fordító létrehozza ezeket a fájlokat.

A hibakereséshez forrástérképfájlok szükségesek.

Az alkalmazás futtatása

Nyomja le F5 (Hibakeresés>Hibakeresés indítása) billentyűkombinációt az alkalmazás futtatásához.

Az alkalmazás egy böngészőben nyílik meg.

A böngészőablakban megjelenik az Üdvözlet címsor és a Kattints rám gomb.
Kattintson a gombra a TypeScript-fájlban megadott üzenet megjelenítéséhez.

Az alkalmazás hibakeresése

Állítson be töréspontot a greeterapp.ts függvényében a kódszerkesztő bal margójára kattintva.

beállítása
Nyomja le F5 az alkalmazás futtatásához.

Előfordulhat, hogy válaszolnia kell egy üzenetre a szkript hibakeresésének engedélyezéséhez.

Jegyzet

Az ügyféloldali szkriptek hibakereséséhez Chrome vagy Edge szükséges.
Az oldal betöltésekor kattintson a Kattints rámgombra.

Az alkalmazás szünetel a töréspontnál. Most megvizsgálhatja a változókat, és használhatja a hibakereső funkciókat.

TypeScript-támogatás hozzáadása külső kódtárhoz

Kövesse az npm-csomagkezelési utasításait egy package.json fájl hozzáadásához a projekthez. Ez a feladat npm-támogatást ad a projekthez.

Jegyzet

Az ASP.NET Core-projektek esetében az ügyféloldali JavaScript- és CSS-fájlok telepítéséhez az npm helyett Library Manager- vagy yarn is használható.
Ebben a példában adjon hozzá egy TypeScript-definíciós fájlt jQueryhez a projekthez. Adja meg a következő kódot a package.json fájlban.
```
"devDependencies": {
  "@types/jquery": "3.5.1"
}
```
Ez a kód TypeScript-támogatást ad a jQueryhez. Maga a jQuery-kódtár már szerepel az MVC-projektsablonban (tekintse meg a Megoldáskezelő wwwroot/lib elemét). Ha másik sablont használ, előfordulhat, hogy a jquery npm-csomagot is tartalmaznia kell.
Ha a Megoldáskezelőben nincs telepítve a csomag, kattintson a jobb gombbal az npm csomópontra, és válassza Csomagok visszaállításalehetőséget.

Jegyzet

Bizonyos esetekben a Megoldáskutató azt jelezheti, hogy egy npm-csomag nincs szinkronban package.json egy ismert probléma miatt, amelyet itt írtak le . Előfordulhat például, hogy a csomag úgy tűnik, mintha nem lenne telepítve, pedig telepítve van. A legtöbb esetben frissítheti a Megoldáskezelőt a package.jsontörlésével, a Visual Studio újraindításával, valamint a jelen cikkben ismertetett package.json fájl újbóli hozzáadásával.
A Megoldáskezelőben kattintson a jobb gombbal a szkriptek mappájára, és válassza a >Új elem hozzáadásalehetőséget.

Ha nem látja az összes elemsablont, válassza Az összes sablon megjelenítéselehetőséget, majd válassza ki az elemsablont.
Válassza a TypeScript-fájllehetőséget, írja be a library.ts-t, majd válassza a Hozzáadáslehetőséget.
A library.tsfájlba add hozzá a következő kódot.
```
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();
```
Az egyszerűség kedvéért ez a kód jQuery és riasztás használatával jelenít meg egy üzenetet.

Ha a jQuery TypeScript-típusdefinícióit hozzáadja, IntelliSense-támogatást kap a jQuery-objektumokhoz, amikor megad egy pontot (.) egy jQuery-objektum után, ahogyan itt látható.
A _Layout.cshtmlfájlban frissítse a szkripthivatkozásokat, hogy az tartalmazza library.js.
```
<script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>
```
Az Index.cshtml fájl végéhez a következő HTML-t add hozzá.
```
<div>
  <p id="ts-example-2">jQuery version is:</p>
</div>
```
Nyomja le F5 (Hibakeresés>Hibakeresés indítása) billentyűkombinációt az alkalmazás futtatásához.

Az alkalmazás megnyílik a böngészőben.

Válassza OK a riasztásban, hogy a lap jQuery-verzióra frissítve legyen: 3.3.1!!.

Következő lépések

Érdemes lehet további részleteket megtudni a TypeScript és a ASP.NET Core használatával kapcsolatban. Ha érdekli az Angular-programozás a Visual Studióban, használhatja a Visual Studio Angular nyelvi szolgáltatásbővítményét.

ASP.NET Core és TypeScript

Angular nyelvi szolgáltatás kiterjesztés

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-08-07