szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:typescript|< TypeScript]]

====== TypeScript és Node.js ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Node.js projekt készítése =====

==== Lépések ====

  * Az npm és a tsc parancs ellenőrzése
  * projekt könyvtár létrehozása, és belépés a könyvtárba
  * Visual Studio Code indítása
  * Node.js projekt indítása
  * webserver telepítése
  * bootstrap telepítése
  * .gitignore fájl készítse
  * src/ index.html és app.ts készítése
  * a projekt indítás és fordítás beállítása a package.json fájlban
  * A git felkészítése

===== Lépések részletezése =====

==== Ellenőrzés ====

Az npm és a tsc parancs ellenőrzése:
  npm --version
  tsc --version

==== Könyvtár készítése ====

Projekt könyvtár készítése és belépés:
  mkdir projekt01
  cd projekt01

==== Visual Studio Code ====


Visual Studio Code indítása:
  code .

==== Node.js projekt ====

Node.js projekt indítása:
  * indítsunk a Visula Studo Code szerkesztőben egy terminált
  * Válasszunk Command Prompt vagy Bash terminált:
    * F1
    * Terminal: Select Default Profile
  * A terminálban:

  npm init -y

==== Telepítések ====

Webszerver telepítése:
  npm install --save-dev lite-server

Bootstrap telepítése:
  npm install bootstrap

==== A .gitignore ====


A .gitignore fájl tartalma:
<code txt .gitignore>
node_modules/
</code>

==== Könyvtár és fájl struktúra ====

Az src/ index.html és app.ts készítése:
  A Visual Studo Code szerkesztőben elkészítjük a könyvtárakat és fájlokat.

==== TypeScript konfigurációs fájl ====

<code javascript tsconfig.json>
{
    "compilerOptions": {
        "rootDir": "src",
        "target": "es6",
        "watch": true
    }
}
</code>

==== lite-server konfigurációs fájl ====

<code javascript bs-config.json>
{
    "server": ["src"]
}
</code>

==== A package.json fájl ====

A package.json fájlban javítsunk két scriptet:

<code javascript>
    "start": "lite-server",
    "tsc": "tsc"
</code>



Teljes package.json fájl:
<code javascript package.json>
{
  "name": "projekt01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server",
    "tsc": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.6.1"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  }
}

</code>



==== A git felkészítése ====

Indítsunk egy új terminált.

Ellenőrizzük a git felhasználót:
  git config --global user.name
  git config --global user.email
Ha szükséges állítsuk be, globálisan vagy helyileg.


Hozzuk létre a Git tárolót:
  git init

===== A kezdeti weblap =====

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Kezdés</h1>

    <script src="app.js"></script>
</body>
</html>
</code>

Írjunk egy rövid TypeScriptet is:
<code javascript app.js>
console.log('Helló');
</code>


===== A szerver és a fordító indítása =====

Két terminálra van szükségünk. Az első terminálban indítjuk a webszervert,
a másodikban a fordítót.

A szerver indítása:
  npm start

A fordító indítása:
  npm run tsc


Ha mentünk a Visual Studio Code-ban az eredmény azonnal látszik az app.js fájlban és a böngészőben is; elkezdhetjük a projektet.