So verwenden Sie TypeScript in einem Monorepo-Setup

Mit einem Monorepo-Setup können Sie mehrere Pakete oder Projekte in einem einzigen Repository verwalten. Mit TypeScript ist dieses Setup besonders leistungsstark, um Typen, Schnittstellen und sogar Dienstprogramme über verschiedene Pakete hinweg zu teilen. Diese Anleitung führt Sie durch die Einrichtung von TypeScript in einer Monorepo-Umgebung.

1. Einrichten des Monorepo

Zum Einrichten eines Monorepo können Sie Tools wie npm-Workspaces oder yarn-Workspaces verwenden. Mit diesen Tools können Sie mehrere Pakete im selben Repository verwalten und Code problemlos projektübergreifend teilen.

1.1 Initialisieren eines Monorepo

Erstellen Sie zunächst einen neuen Ordner für Ihr Monorepo und initialisieren Sie ihn mit npm oder yarn.

mkdir my-monorepo
cd my-monorepo
npm init -y

Konfigurieren Sie dann Arbeitsbereiche in Ihrem package.json:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Dieses Setup teilt npm oder yarn mit, dass alle Pakete im Ordner packages gespeichert werden.

2. Pakete zum Monorepo hinzufügen

Erstellen Sie zwei Pakete in Ihrem Monorepo. Für dieses Beispiel erstellen wir ein shared-Paket für wiederverwendbaren Code und ein web-app-Paket für eine Frontend-Anwendung.

mkdir -p packages/shared
mkdir -p packages/web-app

Initialisieren Sie in jedem Paket ein package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Hinzufügen von TypeScript zum Monorepo

Als Nächstes richten wir TypeScript ein. Installieren Sie TypeScript und die erforderlichen Abhängigkeiten im Stammverzeichnis Ihres Monorepo:

npm install typescript --save-dev

Erstellen Sie eine tsconfig.json-Datei auf Stammebene, um die TypeScript-Konfiguration für das gesamte Monorepo zu definieren:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

Der Schlüssel ist hier die Option paths, die es TypeScript ermöglicht, Importe aus verschiedenen Paketen im Monorepo zu verstehen.

4. Konfigurieren von TypeScript in jedem Paket

Jedes Paket benötigt seine eigene tsconfig.json, um im Monorepo ordnungsgemäß zu funktionieren. Hier ist eine Beispielkonfiguration für das shared-Paket:

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

Und für das web-app-Paket:

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

Jetzt kann TypeScript in jedem Paket verwendet werden und die Konfigurationen werden von der Stammdatei tsconfig.json aus geteilt.

5. Hinzufügen von TypeScript-Code zu den Paketen

Fügen wir beiden Paketen einige TypeScript-Beispielcodes hinzu. Erstellen Sie im Paket shared einen Ordner src und fügen Sie eine TypeScript-Datei hinzu:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

Exportieren Sie in index.ts eine einfache Funktion:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

Erstellen Sie im Paket web-app einen Ordner src und eine Datei index.ts:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

Importieren Sie nun die gemeinsam genutzte Funktion:

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. Erstellen des Monorepo

Um den gesamten TypeScript-Code im Monorepo zu kompilieren, müssen wir den TypeScript-Compiler verwenden. Führen Sie im Stammverzeichnis des Monorepo Folgendes aus:

npx tsc --build

Dieser Befehl kompiliert alle Pakete, indem er ihren jeweiligen tsconfig.json-Dateien folgt.

Abschluss

In diesem Handbuch haben wir erläutert, wie Sie TypeScript in einem Monorepo einrichten und verwenden. Indem Sie Ihren Code in einer Monorepo-Struktur organisieren, können Sie ihn problemlos über mehrere Pakete hinweg teilen und so Ihren Entwicklungsprozess effizienter gestalten. Mit der starken Typisierung und den Projektreferenzen von TypeScript ist dieses Setup perfekt für groß angelegte Anwendungen oder gemeinsam genutzte Bibliotheken.