Aprender a tipar useReducer y Context API con TypeScript te ayuda a prevenir errores, mejorar la legibilidad de tu código y hacer debugging más rápido en proyectos React. Si ya trabajas con estos hooks en JavaScript, este recorrido te muestra cómo darles tipos precisos para que tu editor te avise antes de romper algo.

¿Cómo se tipa useReducer en React con TypeScript?

Un useReducer tiene dos piezas que necesitas tipar: el estado y las acciones. Si tu reducer accede a state.count, ya sabes que el estado es un objeto, y si accede a action.type, la acción también lo es.

¿Cómo defino el tipo del estado?

En el ejemplo del contador, el estado tiene una propiedad count que guarda un número. La definición queda así [0:34]:

ts type State = { count: number; };

Con eso le dices a TypeScript que cualquier estado que pase por tu reducer debe ser un objeto con count numérico. Nada más, nada menos.

¿Cómo defino el tipo de las acciones?

Aquí viene lo interesante. Dentro del switch del reducer solo existen dos acciones válidas: increment y decrement. En vez de tipar type como un string genérico, puedes restringirlo a esos dos valores literales [1:05]:

ts type Action = { type: 'increment' | 'decrement'; };

Esto se llama union de literales y es una de las herramientas más potentes de TypeScript. Si por error escribes incremennt con una n de más, el editor te marca el problema antes de ejecutar el código.

¿Por qué usar literales en lugar de string? Porque garantizan que solo lleguen los valores válidos. Si tipas como string, un typo pasa desapercibido y rompe tu reducer en tiempo de ejecución.

¿Cómo tipar la firma del reducer?

Un reducer recibe un estado y una acción, y devuelve un nuevo estado. Esa entrada y salida también se tipa [1:48]:

ts function reducer(state: State, action: Action): State { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; } }

Los dos puntos después de los paréntesis indican el tipo de retorno. Si tu reducer devuelve algo que no encaja con State, TypeScript lo detecta al instante. Esa retroalimentación inmediata es la que ahorra horas de debugging.

¿Cómo se tipa Context API en React?

El segundo ejercicio es un contexto para cambiar el tema de un botón entre claro y oscuro. El contexto expone dos cosas: el valor del tema y una función toggleTheme que lo cambia.

¿Cómo defino el tipo del contexto?

Una buena convención es nombrar el tipo igual que el contexto, agregando la palabra Type al final. Así mantienes consistencia en todo el proyecto [3:10]:

ts type ThemeContextType = { theme: string; toggleTheme: () => void; };

El tema es un string (puede ser light o dark) y toggleTheme es una función que no retorna nada, por eso usas () => void. Ese void indica explícitamente que no esperas un valor de regreso.

¿Cómo paso ese tipo a createContext?

Usas picoparéntesis (los símbolos <>) para indicar el tipo genérico:

ts const ThemeContext = createContext<ThemeContextType>(/* valor inicial */);

Con eso, cualquier componente que consuma el contexto sabe exactamente qué propiedades existen y de qué tipo son.

¿Cómo tipar children en el Provider?

El provider recibe children, que en React es cualquier cosa renderizable: un elemento, un texto, varios componentes anidados. El tipo correcto es ReactNode [4:25]:

ts type ProviderProps = { children: React.ReactNode; };

function ThemeProvider({ children }: ProviderProps): React.ReactNode { // lógica }

También puedes anotar el tipo de retorno del componente como ReactNode para dejar claro qué devuelve.

¿Qué es ReactNode? Es el tipo que cubre todo lo que React puede renderizar: elementos JSX, strings, números, arrays o fragments. Es la opción más flexible para tipar children.

¿Por qué vale la pena tipar en proyectos React?

En componentes pequeños el tipado parece innecesario, pero en proyectos grandes se vuelve una herramienta gigantesca. Estos son los beneficios concretos:

• Prevención de errores. Detectas typos y tipos incompatibles antes de ejecutar el código.
• Mejor legibilidad. Cualquier persona que lea tu reducer o tu contexto entiende qué entra y qué sale.
• Debugging más rápido. Verificas si estás mandando los valores correctos sin tener que abrir el navegador.
• Evitas la coerción de tipos. JavaScript permite sumar un string con un número o un booleano, y eso genera bugs silenciosos. TypeScript te obliga a sumar número con número.

La coerción de tipos es ese comportamiento de JavaScript que convierte automáticamente entre strings, números y booleanos cuando los mezclas. Cuando estudias JavaScript suena intuitivo, pero en producción esos casos raros te explotan en la cara. TypeScript te quita ese problema de encima.

Cuéntame en los comentarios qué tal te pareció este módulo sobre TypeScript.