TypeScript-kód fordítása npm használatával

A TypeScript npm-csomag használatával TypeScript-támogatást adhat a projektekhez a JavaScript Project System (JSPS)vagy .esprojalapján. A Visual Studio 2019-től kezdve ajánlott az npm-csomagot használni a TypeScript SDK helyett. A TypeScript npm csomag nagyobb hordozhatóságot biztosít a különböző platformokon és környezetekben.

Fontos

Az ASP.NET Core-projektek esetében az npm helyett használja a NuGet-csomag a TypeScript-támogatás hozzáadásához.

TypeScript-támogatás hozzáadása npm használatával

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

1. Ellenőrizze, hogy telepítenie kell-e bármilyen fejlesztési számítási feladatot a Visual Studióhoz vagy a Node.js futtatókörnyezethez.

   A JavaScript Project System (JSPS) vagy .esprojhasználatával létrehozott projektekhez nincs szükség további számítási feladatokra. Csak telepítenie kell az npm-et (https://www.npmjs.com/), amely a Node.jsrésze.

2. Ha a projekt még nem tartalmazza, telepítse a TypeScript npm-csomagot.

   A Megoldáskezelőben (jobb oldali ablaktáblán) nyissa meg a package.json elemet a projekt gyökérkönyvtárában. A felsorolt csomagok a Megoldáskezelő npm csomópontja alatti csomagoknak felelnek meg. További információ: NPM-csomagok kezelése.

   A Kimeneti ablakban ellenőrizze az npm beállítást a csomagtelepítés előrehaladásának megtekintéséhez. A telepített csomag megjelenik az npm csomópont alatt a Megoldáskezelőben.

3. Ha a projekt még nem tartalmazza, adjon hozzá egy tsconfig.json fájlt a projekt gyökeréhez. A fájl hozzáadásához 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ájlt, 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 konfigurálhatja a TypeScript fordító beállításait.

4. Nyissa meg a tsconfig.json és frissítsen a kívánt fordítóbeállítások beállításához.

   Példa egy egyszerű tsconfig.json fájlra.

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

   Ebben a példában:

   • tartalmazza, hogy közli a fordítónak, 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ája a következő:

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

2. A package.jsonesetén adjon támogatást a Visual Studio fordítási és tisztítási parancsaihoz az alábbi szkriptek használatával.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Ha egy harmadik féltől származó eszköz, például a webpack használatával szeretne buildelést készíteni, hozzáadhat egy parancssori buildszkriptet a package.json fájlhoz:

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

3. Ha konfigurálnia kell a buildelési és üzembehelyezési beállításokat, például az alkalmazás URL-címét vagy a futtatókörnyezet parancsát, kattintson a jobb gombbal a projektcsomópontra a Megoldáskezelőben, és válassza a Tulajdonságok lehetőséget.

   Jegyzet

   Külső eszközök, JavaScript-projektrendszert (JSPS) vagy .esproj-t használó projektek konfigurálásakor ne használja az Eszközök>beállításai>projektek és megoldások>> területen konfigurált útvonalakat. Ezek a beállítások más projekttípusokhoz is használhatók.

4. Válassza Build > Build Solutionlehetőséget.

   Az alkalmazás automatikusan elkészül, amikor futtatja. A buildelési folyamat során azonban a következők fordulhatnak elő:

   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.

   forrástérképfájlokra van szükség ahibakereséséhez.

Az alkalmazás futtatása

Az alkalmazás fordítás utáni futtatására vonatkozó utasításokért lásd: Node.js és Express-alkalmazás létrehozása.

Építési feladatok automatizálása

A Visual Studióban a Task Runner Explorerrel automatizálhatja a külső eszközök, például az npm és a webpack feladatait.

• NPM-feladatfuttató – Hozzáadja a támogatást a package.jsondefiniált npm-szkriptekhez. Támogatja a fonalat.
• Webpack feladatfuttató – Támogatja a webpacket.

Kapcsolódó tartalom

Tulajdonságok, React, Angular, Vue