Einrichtung eines Node.js-Projekts mit TypeScript und Express

Die Einrichtung eines Node.js-Projekts mit TypeScript und Express verleiht Ihrer Anwendung Struktur, Skalierbarkeit und Klarheit. In dieser Anleitung führen wir Sie Schritt für Schritt durch die Initialisierung Ihres Node.js-Projekts, die Integration von TypeScript und Express sowie das Hinzufügen wesentlicher Entwicklertools.

Schritt 1: Initialisieren Ihres Node.js-Projekts

Erstellen Sie Ihren Projektordner und initialisieren Sie npm:

mkdir my-node-project
cd my-node-project
npm init -y

Dies generiert eine package.json. Erstellen Sie als Nächstes eine .gitignore, um Node-Module und Build-Dateien auszuschließen:

node_modules
dist

Schritt 2: TypeScript hinzufügen

Installieren Sie TypeScript und zugehörige Abhängigkeiten:

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

Erstellen Sie Ihre TypeScript-Konfiguration mit:

npx tsc --init

Passen Sie Ihre tsconfig.json wie folgt an:

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Erstellen Sie den src-Ordner für Ihren Code:

mkdir src

Schritt 3: Express einrichten

Installieren Sie Express und seine Typen:

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

Erstellen Sie einen einfachen Server in src/index.ts:

import express, { Application, Request, Response } from 'express';

const app: Application = express();
const PORT = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript + Express!');
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Führen Sie ihn mit folgendem Befehl aus:

npx ts-node src/index.ts

Schritt 4: ESLint und Prettier einrichten

Installieren Sie ESLint, Prettier und Plugins:

npm install --save-dev eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-config-prettier

Richten Sie ESLint mit .eslintrc.json ein:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "env": { "node": true, "es6": true, "jest": true }
}

Erstellen Sie .prettierrc.json:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

Aktualisieren Sie Ihre Skripte in package.json:

"scripts": {
  "lint": "eslint 'src/**/*.{ts,js}'",
  "format": "prettier --write ."
}

Schritt 5: Jest für Tests

Fügen Sie Jest und TypeScript-Unterstützung hinzu:

npm install --save-dev jest ts-jest @types/jest
npx ts-jest config:init

Schreiben Sie einen einfachen Test src/__tests__/sum.test.ts:

import { sum } from '../sum';

test('sum works', () => {
  expect(sum(1, 2)).toBe(3);
});

Mit entsprechendem Modul:

export function sum(a: number, b: number): number {
  return a + b;
}

Aktualisieren Sie package.json:

"scripts": {
  "test": "jest --watch"
}

Schritt 6: Nodemon für die Entwicklung

Installieren und konfigurieren Sie nodemon:

npm install --save-dev nodemon

Fügen Sie nodemon.json hinzu:

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.test.ts"],
  "exec": "ts-node ./src/index.ts"
}

Skript für die Entwicklungsumgebung in package.json:

"scripts": {
  "dev": "nodemon"
}

Führen Sie npm run dev aus, um Ihren Server während der Entwicklung automatisch neu zu laden.

Bewährte Praktiken

• Verwenden Sie separate Ordner (src für Code, dist für Build-Ausgaben).
• Committen Sie nur Quelldateien, nicht kompilierten Code (dist) oder Node-Module.
• Führen Sie npm run lint und npm run format regelmäßig aus.
• Kompilieren Sie den Code (npm run build) vor der Bereitstellung und starten Sie dann mit npm start.

Häufig gestellte Fragen