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

Kann ich anstelle von npm Yarn oder pnpm verwenden?

Ja. Ersetzen Sie einfach die npm-Befehle durch ihre entsprechenden Yarn- oder pnpm-Befehle.

Sollte ich ts-node in der Produktion verwenden?

Nein. Kompilieren Sie Ihr Projekt immer mit `tsc` und führen Sie JavaScript aus dem `dist`-Ordner in der Produktion aus.

Benötige ich Jest für einfache Projekte?

Obwohl Jest optional ist, verbessert es die Zuverlässigkeit und Codequalität erheblich, was es auch für einfachere Projekte wertvoll macht.