[[:oktatas:web:back-end_framework:express|< Express]]

====== Express - TypeScript ======

  * **Szerző:** Sallai András
  * Copyright (c) 2023, Sallai András
  * Szerkesztve: 2023, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Projekt =====

A projekt elkészítése:

  mkdir app01
  cd app01
  npm init -y


<code>
app01/
  |-app/
  |  `-index.js
  |-node_modules/
  |-src/
  |  `-index.ts
  |-package-lock.json
  |-package.json
  `-tsconfig.json
</code>

===== Függőségek =====

  npm install express 

  npm install typescript @types/node @types/express --save-dev

Ha szeretnénk ts-node-t is használni a fordításhoz:
  npm install ts-node --save-dev
===== tsconfig.json =====

<code javascript tsconfig.json>
{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "outDir": "./app",
        "strict": true,
        "esModuleInterop": true
    }
}
</code>

==== esModuleInterop ====

Az esModuleInterop beállítás szükséges a ES6 és CommonJS modulok együttműködéséhez.
Nélküle az például az express import csak így hajtható végre:
<code javascript>
import * as express from 'express';
</code>

Ha true értékre van állítva használhatjuk így:
<code javascript>
import express from 'express';
</code>
==== forceConsistentCasingInFileNames ====

Ez a beállítás nincs a fenti mintabeállításokban, de jól jöhet.

A forceConsistentCasingInFileNames ha true értékre van állítva, 
a fordító az importálásoknál megköveteli a kis- és nagybetűk 
egyezésének vizsgálatát. Így kompatibilis lesz a kódunk olyan
rendszerekkel is, ahol a kis- és nagybetűs fájlnevek 
mást jelenthetnek.

<code javascript>
{
    "compilerOptions": {
        "forceConsistentCasingInFileNames": true
    }
}
</code>

==== include ====

Megadhatjuk, hogy az csak src könyvtárban keresse a .ts fájlokat:

<code javascript tsconfig.json>
{
  "include": ["src/**/*.ts"],
}
</code>

Alapértelmezetten a minden mappában keres .ts fájt, kivéve a node_modules.

Van aki kifejezetten kizárja a node_modules használatát, de ez csak az egyértelműsíétst
szolgálja.

<code javascript tsconfig.json>
{
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
</code>



===== package.json =====

<code javascript package.json>
{
  "name": "express-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app/index.js",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^20.3.1",
    "typescript": "^5.1.3"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}
</code>


==== ts-node használata ====

Legyen telepítve a ts-node csomag:
  npm install ts-node

Egy lehetséges package.json scripts tulajdonság:
<code javascript>
{
    "scripts": {
        "start": "ts-node src/index.ts",
        "build": "tsc",
        "serve": "node app/index.js"
    }
}
</code>

Ha az **npm start** paranccsal indítjuk a szervert, akkor fordítás nélkül futni fog a TypeScript kódunk.
  npm start

Az app könyvtár csak a build hatására jön létre:
  npm run build

Az app könyvtár tartalmának futtatásához:
  npm run serve



===== Szerver =====

<code javascript src/index.ts>
import express, { Application, Request, Response } from 'express';
const app: Application = express();

const PORT = 8000;

app.get('/msg', (req: Request, res: Response) => {
    res.json({ message: 'Helló'});
});

app.listen(PORT, () => {
    console.log(`Running: localhost:${PORT}`);
});
</code>

Az Application típus használata elhagyható, mivel az **app** objektum azonnal értéket kap.
A req objektum Request és a res objektum Response használata azonban nem hagyható el.

Fordítás:
  npm run build

Futtatás:
  npm start


===== Router külön fájlba =====

<code javascript src/index.js>
import express, { Application, Request, Response } from 'express';
import router from './routes/api';
const app: Application = express();

const PORT = 8000;

app.use(router)

app.listen(PORT, () => {
    console.log(`Running: localhost:${PORT}`);
});

</code>


<code javascript src/routes/api.js>
import { Router, Request, Response } from 'express';

const router: Router = Router();


router.get('/msg', (req: Request, res: Response) => {
    res.json({ message: 'Helló'});
});

export default router;
</code>