Gyakorlat – TypeScript-projekt beállítása

10 perc

Ebben a gyakorlatban egy TypeScript-projektet fog létrehozni. Ezt követően a fordító futtatásával és a JavaScript-fájl létrehozásának ellenőrzésével ellenőrizheti, hogy a fejlesztői környezet megfelelően van-e beállítva.

TypeScript-projekt beállítása a Visual Studio Code-ban

Ebben a lépésben létrehoz egy projekt-munkaterületet a Visual Studio Code-ban, majd inicializálja a projektet.

Nyissa meg a Visual Studio Code-ot.
Az Üdvözlőablakban válassza a Munkaterület hozzáadása mappát.
Hozzon létre egy új projektmappát, majd válassza a Hozzáadás lehetőséget.
A bal oldali panelen válassza az Explorer gombot.
Az Explorer panelen válassza az Új fájl ikont.
A 01. modul gyakorlata csoportban írja be a modul01.ts fájlnevet, majd válassza az Enter lehetőséget. A TypeScript-fájl megjelenik egy új kódszerkesztőben.

Tsconfig.json-fájl létrehozása

A TypeScript-fordító alapértelmezett viselkedést alkalmaz a TypeScript-forráskód fordításakor. A TypeScript-fordító beállításait azonban módosíthatja úgy, hogy hozzáad egy tsconfig.json fájlt a TypeScript-projektmappa gyökeréhez. Ez a fájl határozza meg a TypeScript-projekt beállításait, például a fordító beállításait és a belefoglalandó fájlokat.

init A TypeScript-fordító beállításával létrehozhat egy tsconfig.json fájlt alapértelmezett beállításokkal.

A Visual Studio Code-ban nyisson meg egy új terminálablakot az Új terminál terminál> kiválasztásával.
A parancssorba írja be a következőt tsc --init:

Figyelje meg, hogy az új tsconfig.json fájl hozzá lett adva az Explorer panelhez. Előfordulhat, hogy frissítenie kell az Explorer panelt a fájl megtekintéséhez.
Nyissa meg a tsconfig.json fájlt a kódszerkesztőben. Látni fogja, hogy számos lehetősége van, amelyek többsége megjegyzésekkel van elfűzve. Tekintse át az egyes engedélyezett beállítások leírását.
A tsconfig.json fájlban keresse meg a célbeállítást, és módosítsa a következőre"ES2015": .
Frissítse a tsconfig.json fájlt, hogy a fordító az összes JavaScript-fájlt egy új mappába mentse.

a. Az Explorer panelen hozzon létre egy új mappát a projektben, amelyet buildnek hívnak.
b. A tsconfig.json fájlban keresse meg a outDir lehetőséget, távolítsa el a megjegyzést, és állítsa be a paramétert buildelésre.
Mentse a tsconfig.json fájlt.
A parancssorba írja be a következőt tsc: Ez a parancs beolvassa a tsconfig.json fájlt, és alaphelyzetbe állítja a projekt beállításait.

Tipp.

A tsconfig.json fájlról további információt a TSConfig-referencia című témakörben talál.

TypeScript fordítása JavaScriptre

Adjunk hozzá néhány JavaScript-kódot a TypeScript-fájlhoz, majd fordítsuk le.

Másolja és illessze be a következő JavaScript-kódot a module01.ts szerkesztőbe.
```
function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));
```
Figyelje meg, hogy annak ellenére, hogy még nem fordította le a kódot, a Visual Studio Code a beépített TypeScript-támogatást használta a típusellenőrzéshez. A korábbiakhoz hasonlóan a függvény két paraméterében addNumbers is vannak típushibák.
Frissítse a TypeScript-kódot az egyes paraméterek típusának megadásához. Cserélje le x a x: numbergombra, és cserélje le y a gombra y: number.
Mentse a TypeScript-fájlt. A TypeScript-fordító csak a fájl mentett verzióján működik.
A Terminál parancssorában adja meg a tsc module01.ts parancsot. A fordítónak hiba nélkül kell futnia.

Figyelje meg, hogy új JavaScript-fájl lett hozzáadva, de nem szerepel az Explorer buildmappájában . Előfordulhat, hogy frissítenie kell az Explorer panelt a fájl megtekintéséhez. Amikor egyetlen fájlon futtatja a tsc parancsot, a fordító figyelmen kívül hagyja a tsconfig.json fájlt.
A konfigurációs fájl betöltéséhez és a mappában lévő összes .ts fájl fordításához futtassa tsc fájlnév nélkül. Ennek a parancsnak hozzá kell adnia a .js fájlt a buildmappához . Ne felejtse el törölni az extra .js fájlt a gyökérmappából.
Nyissa meg a module01.js fájlt, majd kattintson a jobb felső sarokban lévő Jobb oldali Szerkesztő felosztása gombra egy új szerkesztőnézet megnyitásához.

Mostantól egymás mellett láthatja a .ts és a .js fájlokat. Figyelje meg, hogy azonosak, kivéve, hogy a .js fájl nem tartalmazza az új típusú széljegyzeteket.
A Terminál parancssorba írja be a következőt node ./build/module01.js: Ez a parancs futtatja a JavaScriptet, és megjeleníti az eredményt a konzolnaplóban.

HTML-fájl hozzáadása

Utolsó lépésként adjon hozzá egy HTML-fájlt a projekthez, hogy futtathassa és tesztelhesse a JavaScript-kódot.

Az Explorerben válassza az Új fájl gombot.
Írja be a modul01.html fájlnevet, majd kattintson az Enter gombra. A HTML-fájl megjelenik egy új kódszerkesztőben.

Másolja és illessze be a következő HTML-fájlt a szerkesztőbe, majd mentse a fájlt.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <title>Test JavaScript</title>
</head>
<body>
   <h1>Test JavaScript</h1>
   <p id="date"></p>
   <p>This page calls the script module01.js and is used for testing.</p>
   <script src="./build/module01.js"></script>
</body>
</html>

Az Explorerben kattintson a jobb gombbal a module01.html fájlra, majd válassza a Megnyitás az alapértelmezett böngészőben lehetőséget.
Aktiválja a böngésző fejlesztői eszközeit, és készen áll a kódolásra a TypeScriptben!

Gyakorlatmegoldás

A kész Visual Studio Code-munkaterületet a GitHub kódtárából töltheti le. A megoldás futtatásához először telepítenie kell a következő szoftvert a gépére:

Visual Studio Code (vagy a választott IDE)
Csomópont Csomagkezelő (npm)
TypeScript Compiler (tsc)

A legjobb eredmény érdekében kövesse a környezet beállítására és a TypeScript fordító ebben a modulban való használatára vonatkozó teljes utasításokat. A környezet beállítása után a Tesztkörnyezet beállítási vagy megoldásfájljai bármelyikét futtathatja a JavaScript-alkalmazások buildeléséhez a TypeScript képzési terv használatával.

Folytatás