Document

[[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:


node_modules/

==== 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 ====


{
    "compilerOptions": {
        "rootDir": "src",
        "target": "es6",
        "watch": true
    }
}

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


{
    "server": ["src"]
}

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


    "start": "lite-server",
    "tsc": "tsc"

Teljes package.json fájl:


{
  "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"
  }
}

==== 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 =====





    
    
    Document


    Kezdés

Írjunk egy rövid TypeScriptet is:


console.log('Helló');

===== 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.