Express - TypeScript

• Szerző: Sallai András
• Copyright © 2023, Sallai András
• Szerkesztve: 2023, 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A projekt elkészítése:

mkdir app01
cd app01
npm init -y

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

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

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "outDir": "./app",
        "strict": true,
        "esModuleInterop": true
    }
}

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:

import * as express from 'express';

Ha true értékre van állítva használhatjuk így:

import express from 'express';

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.

{
    "compilerOptions": {
        "forceConsistentCasingInFileNames": true
    }
}

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

tsconfig.json

{
  "include": ["src/**/*.ts"],
}

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.

tsconfig.json

{
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

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

Legyen telepítve a ts-node csomag:

npm install ts-node

Egy lehetséges package.json scripts tulajdonság:

{
    "scripts": {
        "start": "ts-node src/index.ts",
        "build": "tsc",
        "serve": "node app/index.js"
    }
}

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

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}`);
});

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

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}`);
});

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;