Feature flags en TypeScript: cómo activar funciones sin implementación

Cuando la implementación es un dolor: por qué los desarrolladores adoran los feature flags

Imagine: pasó una semana desarrollando una nueva función. La cubrió con pruebas, pasó la revisión de código, presionó el botón de implementación. Y entonces, ¡bum! — todo se rompe en producción. Los usuarios están furiosos, el gerente se estresa, usted revierte la versión frenéticamente. ¿Le suena familiar?

Ahora imagine otro escenario: activa la nueva función solo para el 5% de los usuarios. Observa las métricas. Ve que todo está bien. Aumenta gradualmente el porcentaje hasta el 100%. Sin estrés, sin reversiones, solo una confianza tranquila.

Esta es la magia de los feature flags (también conocidos como feature toggles, banderas de funciones). En proyectos TypeScript, esta técnica es especialmente buena gracias al tipado estático y al estricto control de tipos. Hoy analizaremos cómo implementar feature flags en su proyecto para que duerma tranquilo y las funciones se activen sin dolor.

Qué son los feature flags en palabras simples

Un feature flag es un interruptor condicional en el código que permite activar o desactivar una funcionalidad sin cambiar el código ni volver a implementar. Se ve más o menos así:

if (featureFlags.isEnabled('new-checkout')) {\n  // código nuevo\n} else {\n  // código antiguo\n}\n

Todo lo genial es simple, ¿verdad? Pero detrás de esta simplicidad se esconde una herramienta poderosa que utilizan Google, Netflix, Facebook y otros gigantes. Ellos no implementan cada detalle — gestionan el comportamiento de la aplicación a través de un panel de control centralizado.

Cuándo los feature flags son realmente necesarios

\n
• Canary release — lanzamiento de una nueva función a una pequeña parte de los usuarios
\n
• Dark launch — prueba oculta, donde la función existe pero los usuarios no la ven
\n
• Pruebas A/B — comparación de dos versiones de funcionalidad
\n
• Kill switch — desactivación de emergencia de código problemático sin implementación
\n
• Permit testing — pruebas en usuarios internos o por roles
\n

En proyectos TypeScript, los feature flags adquieren un encanto especial: el compilador verifica que use las banderas correctamente, no confunda tipos y no olvide manejar todos los estados.

Arquitectura del sistema de feature flags

Antes de escribir código, analicemos en qué consiste un sistema competente de gestión de funciones.

Componentes básicos

\n
1. Almacenamiento de banderas — donde residen los valores (JSON, base de datos, servicio externo)
\n
2. Proveedor — módulo que carga y almacena en caché las banderas
\n
3. Parte cliente — código que verifica el estado de las banderas
\n
4. Panel de control — interfaz para cambiar las banderas en tiempo real
\n

Implementación más simple en TypeScript

Comencemos con el ejemplo más básico. Crearemos un tipo para las banderas y un servicio 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

Ahora escribimos el servicio en sí:

// 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    // Verificación por usuarios específicos\n    if (config.userIds && userId) {\n      return config.userIds.includes(userId);\n    }\n\n    // Rollout por porcentaje