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