Tartalomjegyzék

TypeScript és Node.js

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

.gitignore

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

tsconfig.json

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

lite-server konfigurációs fájl

bs-config.json

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

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

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

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>

Írjunk egy rövid TypeScriptet is:

app.js

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.