Monorepository mit TypeScript: Code-Organisation und Best Practices

Einführung in Monorepos mit TypeScript

Mit der wachsenden Komplexität moderner Webanwendungen stehen Entwickler zunehmend vor dem Problem der Codeverwaltung. Wenn ein Projekt aus vielen miteinander verbundenen Modulen besteht – Frontend, Backend, allgemeine Bibliotheken – kann der traditionelle Ansatz mit separaten Repositories (Polyrepo) zu Code-Duplizierung, Versionsabweichungen und Schwierigkeiten beim Refactoring führen.

Ein Monorepo ist eine Strategie, bei der der Code mehrerer Projekte in einem einzigen Repository gespeichert wird. In Kombination mit TypeScript wird ein Monorepo zu einem leistungsstarken Werkzeug: Starke Typisierung gewährleistet die Sicherheit von Änderungen im gesamten Stack, und ein einheitliches Build-System vereinfacht die Abhängigkeitsverwaltung.

In diesem Artikel betrachten wir, wie man ein Monorepo mit TypeScript organisiert: von der grundlegenden Struktur bis hin zu fortgeschrittenen Tools wie Nx und Turborepo.

Vorteile eines Monorepos für TypeScript-Projekte

Bevor wir zur Praxis übergehen, schauen wir uns an, warum ein Monorepo besonders vorteilhaft für TypeScript-Projekte ist:

• Einheitliche Typisierung – TypeScript ermöglicht die Wiederverwendung von Interfaces und Typen zwischen Paketen ohne Duplizierung.
• Atomare Commits – Änderungen an der API und ihren Nutzern können in einem einzigen Commit vorgenommen werden, was Reviews und Rollbacks vereinfacht.
• Vereinfachtes Refactoring – IDEs (z.B. VS Code) verarbeiten Umbenennungen und Dateiverschiebungen im gesamten Repository korrekt.
• Build-Caching – Tools wie Nx cachen Kompilierungsergebnisse und beschleunigen so CI/CD.

Grundlegende Struktur eines Monorepos

Beginnen wir mit einer einfachen, aber effektiven Struktur. Wir erstellen ein Root-Projekt und mehrere Pakete:

my-monorepo/├── packages/│   ├── shared/          # Gemeinsame Typen und Hilfsfunktionen│   │   ├── src/│   │   ├── package.json│   │   └── tsconfig.json│   ├── server/          # Backend (z.B. Express)│   │   ├── src/│   │   ├── package.json│   │   └── tsconfig.json│   └── web/             # Frontend (React)│       ├── src/│       ├── package.json│       └── tsconfig.json├── package.json         # Root package.json├── tsconfig.base.json   # Basis-tsconfig für alle Pakete└── .gitignore

Die Root-package.json sollte die Workspace-Konfiguration enthalten. Für npm und Yarn sieht das so aus:

{  "name": "my-monorepo",  "private": true,  "workspaces": [    "packages/*"  ],  "scripts": {    "build": "tsc --build",    "clean": "tsc --build --clean"  }}

Die Basis-tsconfig.base.json legt die allgemeinen Kompilierungseinstellungen fest:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true,    "forceConsistentCasingInFileNames": true,    "declaration": true,    "declarationMap": true,    "sourceMap": true,    "composite": true  }}

Jedes Paket erweitert die Basiskonfiguration:

{  "extends": "../../tsconfig.base.json",  "compilerOptions": {    "outDir": "./dist",    "rootDir": "./src"  },  "include": ["src"]}

Abhängigkeitsverwaltung und TypeScript paths

Eines der Hauptprobleme von Monorepos ist die korrekte Konfiguration von Importen zwischen Paketen. Anstatt Pakete in npm zu veröffentlichen, verwenden wir TypeScript Project References und paths.

Einrichtung von Project References

Fügen wir in der Root-tsconfig.json Verweise auf die Projekte hinzu:

{  "files": [],  "references": [    { "path": "./packages/shared" },    { "path": "./packages/server" },    { "path": "./packages/web" }  ]}

Jetzt wird beim Start