TypeScript-kód fordítása (ASP.NET Core)

A TypeScript NuGet-csomaggal TypeScript-támogatást adhat a ASP.NET Core-projektekhez. A Visual Studio 2019-től kezdve ajánlott a NuGet-csomagot használni a TypeScript SDK helyett. A TypeScript NuGet-csomag nagyobb hordozhatóságot biztosít a különböző platformokon és környezetekben.

ASP.NET Core-projektek esetében a NuGet-csomag egyik gyakori használata a TypeScript fordítása a .NET Core parancssori felülettel. A .NET-forgatókönyvekben a NuGet-csomag az előnyben részesített beállítás, és ez az egyetlen módja a TypeScript-fordítás engedélyezésének .NET Core CLI-parancsokkal, például dotnet build és dotnet publish. Emellett MSBuild integrációs ASP.NET Core és TypeScript használatával, válassza a NuGet-csomagot.

Fontos

A JavaScript Project System (JSPS)vagy .esproj projektek esetén a npm-csomag nuGet helyett adja hozzá a TypeScript-támogatást.

TypeScript-támogatás hozzáadása a NuGettel

A TypeScript NuGet-csomag TypeScript-támogatást ad hozzá. Amikor a TypeScript 3.2-es vagy újabb Verziójának NuGet-csomagja telepítve van a projektbe, a TypeScript nyelvi szolgáltatás megfelelő verziója betöltődik a szerkesztőbe.

Ha telepítve van a Visual Studio, akkor a Visual Studio automatikusan felveszi a hozzá mellékelt node.exe. Ha nincs telepítve Node.js, javasoljuk, hogy telepítse az LTS-verziót a Node.js webhelyről.

1. Nyissa meg a ASP.NET Core-projektet a Visual Studióban.

2. A Megoldáskezelőben (jobb oldali ablaktáblán). kattintson a jobb gombbal a projektcsomópontra, és válassza a NuGet-csomagok kezeléselehetőséget. A Tallózás lapon keresse meg a Microsoft.TypeScript.MSBuildcsomagot, majd kattintson a Telepítés gombra a csomag telepítéséhez.

   

   A Visual Studio hozzáadja a NuGet-csomagot a Megoldáskezelő Függőségek csomópontjához. A rendszer hozzáadja a következő csomaghivatkozást a *.csproj fájlhoz.

   <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.8.3">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
   </PackageReference>
   

3. Kattintson a jobb gombbal a projektcsomópontra, és válassza a > Új elem hozzáadásalehetőséget. Válassza ki a TypeScript JSON-konfigurációs fájt, majd kattintson a Hozzáadás gombra.

   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 beállíthat beállításokat a TypeScript-fordítóhoz.

4. Nyissa meg a tsconfig.json, majd frissítse a fordítóbeállításokat a kívánt módon.

   Használja az alábbi példát, amely egy egyszerű tsconfig.json fájlt mutat be.

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

   Ebben a példában:

   • adja meg a fordítónak, hogy hol keresse meg a TypeScript-fájlokat (*.ts).
   • outDir beállítás megadja a TypeScript-fordító által lefordított egyszerű JavaScript-fájlok kimeneti mappáit.
   • sourceMap beállítás azt jelzi, hogy a fordító létrehoz-e sourceMap fájlokat.

   Az előző konfiguráció csak alapszintű bevezetést nyújt a TypeScript konfigurálásához. További információ a többi beállításról: tsconfig.json.

Az alkalmazás létrehozása

1. Adjon hozzá TypeScript (.ts) vagy TypeScript JSX (.tsx) fájlokat a projekthez, majd adja hozzá a TypeScript-kódot. A TypeScript egyszerű példájához használja a következő kódot:

   let message: string = 'Hello World';
   console.log(message);
   

2. Ha régebbi, nem SDK stílusú projektet használ, kövesse az Alapértelmezett importálás eltávolítása az összeállítás előtt című témakör utasításait.

3. Válassza a Build > Build Solutionparancsot.

   Bár az alkalmazás automatikusan buildel, amikor futtatja, szeretnénk áttekinteni, hogy mi történik a buildelési folyamat során:

   Ha forrástérképeket hozott létre, nyissa meg a outDir beállításban megadott mappát, és keresse meg a létrehozott *.js fájlt a létrehozott *js.map fájl(ok) mellett.

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

4. Ha a projekt minden mentésekor fordítást szeretne végezni, használja a compileOnSave lehetőséget tsconfig.json.

   {
      "compileOnSave":  true,
      "compilerOptions": {
      }
   }
   

Ha például a Gulp és a Task Runner segítségével építi meg az alkalmazását, tekintse meg a ASP.NET Core és TypeScriptcímű témakört.

Ha olyan problémákba ütközik, amelyekben a Visual Studio Node.js vagy külső gyártótól származó eszközt használ, amely eltér a várt verziótól, előfordulhat, hogy be kell állítania a Visual Studio használati útvonalát. Válassza az Eszközök>Beállításoklehetőséget. A Projektek és megoldásokterületen válassza a Web Package Management>Külső webeszközöklehetőséget.

Az alkalmazás futtatása

Nyomja le F5, vagy kattintson az ablak tetején található Start gombra.

NuGet-csomagstruktúra részletei

Microsoft.TypeScript.MSBuild.nupkg két fő mappát tartalmaz:

• mappa létrehozása

  Ebben a mappában két fájl található. Mindkettő belépési pont – a fő TypeScript-célfájlhoz és a props fájlhoz.

  1. Microsoft.TypeScript.MSBuild.targets

     Ez a fájl beállítja azokat a változókat, amelyek meghatározzák a futásidejű platformot, például a TypeScript.Tasks.dllelérési útját, mielőtt importálja Microsoft.TypeScript.targets az -eszközökről mappából.

  2. Microsoft.TypeScript.MSBuild.props

     Ez a fájl importálja Microsoft.TypeScript.Default.props az eszközökről mappából, és beállítja a tulajdonságokat, amelyek jelzik, hogy a buildet a NuGeten keresztül indították el.

• eszközök mappa

  A 2.3-at megelőző csomagverziók csak tsc mappát tartalmaznak. Microsoft.TypeScript.targets és TypeScript.Tasks.dll a gyökérszinten találhatók.

  A 2.3-es és újabb csomagverziókban a gyökérszint Microsoft.TypeScript.targets és Microsoft.TypeScript.Default.propstartalmaz. Ezekről a fájlokról további információt MSBuild Configurationcímű témakörben talál.

  A mappa emellett három almappát is tartalmaz:

  1. net45

     Ez a mappa TypeScript.Tasks.dll és egyéb DLL-eket tartalmaz, amelyektől függ. Ha windowsos platformon készít projektet, az MSBuild a mappából származó DLL-eket használja.

  2. netstandard1.3

     Ez a mappa a TypeScript.Tasks.dllegy másik verzióját tartalmazza, amelyet a projektek nem Windows rendszerű gépeken való létrehozásakor használnak.

  3. tsc

     Ez a mappa tsc.js, tsserver.js és minden olyan függőségi fájlt tartalmaz, amely csomópontszkriptként való futtatásához szükséges.

     Jegyzet

     Ha a Visual Studio telepítve van, a NuGet-csomag automatikusan felveszi a Visual Studióval csomagolt node.exe verzióját. Ellenkező esetben Node.js kell telepíteni a gépre.

     A 3.1 előtti verziók tartalmaztak egy tsc.exe futtatható fájlt a fordítás végrehajtásához. A 3.1-es verzióban a végrehajtható fájlt eltávolították, és a node.exehasználatát részesítik előnyben.

Alapértelmezett importálás eltávolítása

Régebbi ASP.NET Core-projektek esetén, amelyek nem SDK-stílusú formátumot használnak, előfordulhat, hogy el kell távolítani néhány projektfájl-elemet.

Ha a NuGet-csomagot használja egy projekt MSBuild támogatásához, a projektfájl nem importálhatja sem Microsoft.TypeScript.Default.props sem Microsoft.TypeScript.targets. A fájlokat a NuGet-csomag importálja, így a külön-külön való beleszámozás nem szándékos működést okozhat.

1. Kattintson a jobb gombbal a projektre, és válassza a Projekt eltávolításalehetőséget.

2. Kattintson a jobb gombbal a projektre, és válassza <projektfájl nevének szerkesztése>lehetőséget.

   Megnyílik a projektfájl.

3. Távolítsa el a Microsoft.TypeScript.Default.props és Microsoft.TypeScript.targetshivatkozásait.

   Az eltávolítandó importálások a következő XML-fájlhoz hasonlóan néznek ki:

   <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')" />