Typescript-kódot transpiláljon az npm alkalmazásával.

A TypeScript npm-csomag használatával TypeScript-támogatást adhat a projektekhez a JavaScript Project System (JSPS)vagy .esprojalapján. 2019 Visual Studio-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

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

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 Visual Studio 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 (), amely a Node.jsrésze.

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

   A Megoldáskezelő (jobb oldali ablaktáblán) nyissa meg a package.json-t a projekt gyökérkönyvtárában. A felsorolt csomagok az 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 a npm csomópont alatt jelenik meg Megoldáskezelő.

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.

   Visual Studio hozzáadja a tsconfig.json fájlt a projekt gyökérkönyvtárához. Ezzel a fájllal konfigurálhatja a tsc, a TypeScript fordító beállításait, amely a TypeScriptet JavaScriptre fordítja.

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).
   • Az outDir beállítás megadja a tsc, 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.json a következő szkriptek használatával adja hozzá a Visual Studio buildelési és tisztítási parancsok támogatását.

   "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 parancsait, kattintson a jobb gombbal a projektcsomópontra a Megoldáskezelő, és válassza a Properties 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ökbeállításaiprojektek é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ása 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 Feladatfuttató explorerrel a Visual Studio segítségével automatizálhatja az olyan külső eszközök feladatait, mint az npm vagy a webpack.

• 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