< TypeScript

TypeScript és Node.js

Szerző: Sallai András

Copyright © Sallai András, 2021, 2023

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

<!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ó');

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.