0Pricing
TypeScript Academy · Lektion

Strategie für ein gemeinsames Typenpaket

Erstellen Sie ein eigenes Typenpaket zur Verwendung im gesamten Monorepo.

Strategie für ein gemeinsames Typenpaket ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum ein gemeinsames Typenpaket?

Das Teilen von Typen zwischen Frontend und Backend verhindert Abweichungen zwischen API-Verträgen. Eine einzige Quelle der Wahrheit führt zu Kompilierungsfehlern, wenn sich die API-Struktur ändert.

// packages/types/src/index.ts
export interface User { id: string; name: string; email: string; }
export interface ApiResponse<T> { data: T; error?: string; }

Paketstruktur

Halten Sie das Typenpaket minimal: Es sollte nur Typen exportieren und keine Laufzeitlogik enthalten. Dadurch bleibt es frei von Seiteneffekten und kann per Tree Shaking optimiert werden.

packages/types/
├── src/
│   ├── index.ts      # re-exports all
│   ├── user.ts
│   ├── product.ts
│   └── api.ts
├── tsconfig.json
└── package.json

tsconfig für ein Typenpaket

Aktivieren Sie emitDeclarationOnly, damit kein JavaScript ausgegeben wird, sondern nur .d.ts-Dateien, auf die Konsumenten verweisen.

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Typenpaket verwenden

Referenzieren Sie das Typenpaket sowohl in der API als auch in der Web-App und importieren Sie Typen mit import type, um Laufzeit-Overhead zu vermeiden.

import type { User, ApiResponse } from "@myapp/types";

async function getUser(id: string): Promise<ApiResponse<User>> {
  // ...
}

Serialisierungssichere Typen beibehalten

Typen, die zwischen Client und Server geteilt werden, sollten nur JSON-serialisierbare Werte enthalten. Vermeiden Sie Date-Objekte und verwenden Sie stattdessen string (ISO).

// Good: serialization-safe
interface Event { id: string; createdAt: string; /* ISO date */ }
// Bad: Date is not JSON-serializable
interface Event { id: string; createdAt: Date; }

Typenpaket versionieren

Versionieren Sie Ihr Typenpaket mit Semver. Eine nicht abwärtskompatible Änderung, etwa das Entfernen oder Umbenennen eines Feldes, erfordert eine Erhöhung der Major-Version.

# Breaking change: major bump
npm version major
# Adding optional fields: minor bump
npm version minor

Typen aus OpenAPI generieren

Automatisieren Sie das Typenpaket, indem Sie es mithilfe von openapi-typescript aus einer OpenAPI-Spezifikation generieren. So stimmen die Typen immer mit dem Backend überein.

npx openapi-typescript ./api/openapi.yaml -o ./packages/types/src/api.ts

Zod für Laufzeit- und Kompilierungszeittypen verwenden

Definieren Sie Typen mit Zod-Schemas und leiten Sie daraus TypeScript-Typen ab. Sowohl die Laufzeitvalidierung als auch die statischen Typen stammen aus derselben Quelle.

import { z } from "zod";
export const UserSchema = z.object({ id: z.string(), name: z.string() });
export type User = z.infer<typeof UserSchema>;

Zirkuläre Abhängigkeiten vermeiden

Das Typenpaket sollte nicht aus anderen Workspace-Paketen importieren, um zirkuläre Abhängigkeitsketten zu verhindern. Halten Sie es als Blattknoten im Abhängigkeitsgraphen.

// types/ should not import from ui/ or api/
// ui/ and api/ both import from types/

Typkorrektheit testen

Verwenden Sie tsd, um Assertions auf Typebene zu schreiben, die überprüfen, ob die gemeinsamen Typen den Erwartungen entsprechen.

import { expectType } from "tsd";
import type { User } from "@myapp/types";
expectType<User>({ id: "1", name: "Alice", email: "a@b.com" });

Zusammenfassung: Strategie für gemeinsame Typen

Ein gemeinsames Typenpaket verhindert Abweichungen von der API: Geben Sie ausschließlich Deklarationen aus, halten Sie Typen JSON-serialisierbar, versionieren Sie mit Semver, generieren Sie sie optional automatisch aus OpenAPI und testen Sie mit tsd.

Kurze Überprüfung

Warum sollten gemeinsame API-Typen string statt Date verwenden?

Das haben Sie gelernt

Ein gemeinsames Typenpaket ist die einzige Quelle der Wahrheit für API-Verträge. Halten Sie es auf die Ausgabe von Deklarationen beschränkt, JSON-sicher und mit Semver versioniert. Optional können Sie es aus OpenAPI generieren, um Abweichungen zwischen Frontend und Backend zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „Strategie für ein gemeinsames Typenpaket“ kostenlos?

Ja — der vollständige Text von „Strategie für ein gemeinsames Typenpaket“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Strategie für ein gemeinsames Typenpaket“?

Erstellen Sie ein eigenes Typenpaket zur Verwendung im gesamten Monorepo. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Strategie für ein gemeinsames Typenpaket“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. TypeScript-Projektreferenzen erklärt
  2. pnpm-Workspaces mit TypeScript
  3. Strategie für ein gemeinsames Typenpaket
  4. Inkrementelle Builds und Caching in Monorepos
← Zurück zu TypeScript Academy