Feature flags en TypeScript : comment activer des fonctionnalités sans déploiement

Quand le déploiement est une douleur : pourquoi les développeurs adorent les feature flags

Imaginez : vous avez passé une semaine à développer une nouvelle fonctionnalité. Vous l'avez couverte de tests, passée en revue, appuyé sur le bouton de déploiement. Et là — boum ! — tout se casse en production. Les utilisateurs sont furieux, le manager s'agite, vous annulez fébrilement la version. Ça vous parle ?

Imaginez maintenant un autre scénario : vous activez la nouvelle fonctionnalité uniquement pour 5 % des utilisateurs. Vous surveillez les métriques. Vous voyez que tout va bien. Vous augmentez progressivement le pourcentage jusqu'à 100 %. Pas de stress, pas d'annulations, seulement une confiance sereine.

C'est la magie des feature flags (aussi appelés feature toggles, drapeaux de fonctionnalités). Dans les projets TypeScript, cette technique est particulièrement intéressante grâce au typage statique et au contrôle strict des types. Aujourd'hui, nous allons voir comment intégrer les feature flags dans votre projet pour que vous dormiez tranquille et que les fonctionnalités s'activent sans douleur.

Qu'est-ce qu'un feature flag en termes simples

Un feature flag est un interrupteur conditionnel dans le code qui permet d'activer ou de désactiver une fonctionnalité sans modifier le code ni redéployer. Cela ressemble à ceci :

if (featureFlags.isEnabled('new-checkout')) {\n  // nouveau code\n} else {\n  // ancien code\n}\n

Tout ce qui est génial est simple, n'est-ce pas ? Mais derrière cette simplicité se cache un outil puissant utilisé par Google, Netflix, Facebook et d'autres géants. Ils ne déploient pas chaque petit détail — ils gèrent le comportement de l'application via un panneau de contrôle centralisé.

Quand les feature flags sont vraiment nécessaires

\n
• Canary release — déploiement d'une nouvelle fonctionnalité sur une petite partie des utilisateurs
\n
• Dark launch — test caché où la fonctionnalité existe mais les utilisateurs ne la voient pas
\n
• Tests A/B — comparaison de deux versions d'une fonctionnalité
\n
• Kill switch — désactivation d'urgence d'un code problématique sans déploiement
\n
• Permit testing — test sur des utilisateurs internes ou basé sur des rôles
\n

Dans les projets TypeScript, les feature flags prennent une dimension particulière : le compilateur vérifie que vous utilisez correctement les drapeaux, que vous ne confondez pas les types et que vous n'oubliez pas de gérer tous les états.

Architecture d'un système de feature flags

Avant d'écrire du code, comprenons de quoi se compose un système de gestion des fonctionnalités bien conçu.

Composants de base

\n
1. Stockage des drapeaux — où sont stockées les valeurs (JSON, base de données, service externe)
\n
2. Fournisseur — module qui charge et met en cache les drapeaux
\n
3. Partie cliente — code qui vérifie l'état des drapeaux
\n
4. Panneau de contrôle — interface pour modifier les drapeaux en temps réel
\n

Implémentation la plus simple en TypeScript

Commençons par l'exemple le plus basique. Créons un type pour les drapeaux et un service simple :

// 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

Écrivons maintenant le service lui-même :

// 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    // Vérification par utilisateurs spécifiques\n    if (config.userIds && userId) {\n      return config.userIds.includes(userId);\n    }\n\n    // Déploiement progressif en pourcentage