Feature Flags in TypeScript: Wie Sie Funktionen ohne Deployment aktivieren

Wenn Deployment wehtut: Warum Entwickler Feature Flags lieben

Stellen Sie sich vor: Sie haben eine Woche an einer neuen Funktion gearbeitet. Mit Tests abgedeckt, Code-Review durchgeführt, den Deployment-Button gedrückt. Und dann – Bumm! – in der Produktion geht alles kaputt. Benutzer sind wütend, der Manager zuckt, Sie rollen fieberhaft die Version zurück. Kommt Ihnen bekannt vor?

Stellen Sie sich nun ein anderes Szenario vor: Sie aktivieren die neue Funktion nur für 5 % der Benutzer. Beobachten die Metriken. Sehen, dass alles in Ordnung ist. Erhöhen den Prozentsatz schrittweise auf 100 %. Kein Stress, keine Rollbacks, nur ruhige Zuversicht.

Das ist die Magie von Feature Flags (auch Feature Toggles, Feature-Flags, Funktionsflags). In TypeScript-Projekten ist diese Technik dank statischer Typisierung und strenger Typkontrolle besonders gut geeignet. Heute schauen wir uns an, wie Sie Feature Flags in Ihr Projekt integrieren, damit Sie ruhig schlafen und Funktionen ohne Schmerz aktivieren können.

Was sind Feature Flags in einfachen Worten

Ein Feature Flag ist ein bedingter Schalter im Code, der es ermöglicht, eine Funktionalität ein- oder auszuschalten, ohne den Code zu ändern oder erneut bereitzustellen. Das sieht ungefähr so aus:

if (featureFlags.isEnabled('new-checkout')) {\n  // neuer Code\n} else {\n  // alter Code\n}\n

Genial einfach, oder? Aber hinter dieser Einfachheit verbirgt sich ein mächtiges Werkzeug, das von Google, Netflix, Facebook und anderen Giganten verwendet wird. Sie deployen nicht jedes Detail – sie steuern das Verhalten der Anwendung über ein zentrales Bedienfeld.

Wann Feature Flags wirklich nötig sind

\n
• Canary Release – Ausrollen einer neuen Funktion für einen kleinen Teil der Benutzer
\n
• Dark Launch – verdecktes Testen, bei dem die Funktion vorhanden ist, aber Benutzer sie nicht sehen
\n
• A/B-Tests – Vergleich zweier Versionen einer Funktionalität
\n
• Kill Switch – Notabschaltung problematischen Codes ohne Deployment
\n
• Permit Testing – Testen mit internen Benutzern oder basierend auf Rollen
\n

In TypeScript-Projekten erhalten Feature Flags einen besonderen Reiz: Der Compiler prüft, ob Sie Flags korrekt verwenden, Typen nicht verwechseln und alle Zustände berücksichtigen.

Architektur eines Feature-Flag-Systems

Bevor wir Code schreiben, schauen wir uns an, woraus ein gut durchdachtes System zur Funktionssteuerung besteht.

Basiskomponenten

\n
1. Flag-Speicher – wo die Werte liegen (JSON, Datenbank, externer Dienst)
\n
2. Provider – Modul, das Flags lädt und zwischenspeichert
\n
3. Client-Teil – Code, der den Status der Flags prüft
\n
4. Bedienfeld – Oberfläche zum Ändern von Flags in Echtzeit
\n

Einfachste Implementierung in TypeScript

Beginnen wir mit dem einfachsten Beispiel. Erstellen wir einen Typ für Flags und einen einfachen Dienst:

// types/feature-flags.ts\nexport type FeatureFlag = \n  | 'new-checkout'\n  | 'dark-mode'\n  | 'recommendations-v2'\n  | 'beta-chat';\n\nexport interface FeatureFlagConfig {\n  flag: FeatureFlag;\n  enabled: boolean;\n  rolloutPercentage?: number;\n  userIds?: string[];\n}\n

Jetzt schreiben wir den Dienst selbst:

// services/feature-flag.service.ts\nexport class FeatureFlagService {\n  private flags: Map<FeatureFlag, FeatureFlagConfig> = new Map();\n\n  constructor(initialFlags: FeatureFlagConfig[]) {\n    initialFlags.forEach(flag => {\n      this.flags.set(flag.flag, flag);\n    });\n  }\n\n  isEnabled(flag: FeatureFlag, userId?: string): boolean {\n    const config = this.flags.get(flag);\n    if (!config) return false;\n\n    if (!config.enabled) return false;\n\n    // Prüfung auf bestimmte Benutzer\n    if (config.userIds && userId) {\n      return config.userIds.includes(userId);\n    }\n\n    // Rollout nach Proz