Az npm és a tsc parancs ellenőrzése:
npm --version tsc --version
Projekt könyvtár készítése és belépés:
mkdir projekt01 cd projekt01
Visual Studio Code indítása:
code .
Node.js projekt indítása:
npm init -y
Webszerver telepítése:
npm install --save-dev lite-server
Bootstrap telepítése:
npm install bootstrap
A .gitignore fájl tartalma:
node_modules/
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.
{ "compilerOptions": { "rootDir": "src", "target": "es6", "watch": true } }
{ "server": ["src"] }
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" } }
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
<!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>
Írjunk egy rövid TypeScriptet is:
console.log('Helló');
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.