Tipar los estados locales con useState y las funciones en React usando TypeScript te ayuda a prevenir errores antes de que aparezcan en producción. Aprenderás a definir tipos en hooks, parámetros y valores de retorno para que tu código sea más predecible y fácil de mantener.

Cómo tipar useState en un componente de React

Cuando creas un componente funcional con extensión .tsx, puedes declarar el tipo del estado dentro de los picoparéntesis (<>) que acompañan al hook. Así le indicas a TypeScript exactamente qué tipo de dato vivirá en ese estado.

Imagina un componente Counter que guarda un número y lo incrementa con un botón. Sin tipado, JavaScript te dejaría sumar un string a ese número y el resultado sería una concatenación silenciosa. Con TypeScript, el editor marca el error de inmediato.

tsx import { useState } from "react";

const Counter = () => { const [count, setCount] = useState<number>(0);

const increment = () => { setCount((prev) => prev + 1); };

return <button onClick={increment}>Increment {count}</button>; };

export default Counter;

Fíjate en useState<number>(0). Ese <number> es la pieza clave: bloquea el estado para que solo acepte números.

¿Qué hacen los picoparéntesis en useState? Sirven como generics de TypeScript. Le dicen al hook qué tipo de dato puede guardar y devolver, evitando que entren valores inesperados.

Por qué tipar previene la coerción de JavaScript

JavaScript permite operaciones como 1 + "hola" y devuelve "1hola" sin avisarte. A esto se le llama coerción de tipos, y es una de las fuentes más comunes de bugs.

Al tipar tu estado como number, TypeScript te obliga a sumar solo números. Si intentas pasar un string al setCount, el compilador detiene el error antes de que llegue al navegador.

Cómo tipar parámetros y valores de retorno en una función

Cuando escribes una función en TypeScript, hay dos lugares donde puedes (y deberías) declarar tipos: los parámetros de entrada y el valor de retorno. Esto convierte a tu función en un contrato claro.

Mira esta función greet que recibe un nombre y devuelve un saludo:

tsx const greet = (name: string): string => { return Hola ${name}; };

console.log(greet("Dev"));

El primer : string después de name indica el tipo del parámetro. El segundo : string después del paréntesis indica qué tipo devolverá la función. Si intentas retornar un número o un booleano, TypeScript se queja.

¿Qué pasa si no tipo una función en TypeScript? Por defecto, sus parámetros toman el tipo any, lo que desactiva todas las validaciones. Es como volver a escribir JavaScript plano.

Por qué evitar el tipo any como buena práctica

El tipo any le dice a TypeScript que esa variable puede ser cualquier cosa: string, número, booleano, objeto. Suena cómodo, pero anula los superpoderes del lenguaje.

Algunas razones para evitarlo:

• Pierdes el autocompletado del editor.
• Pierdes la detección temprana de errores.
• El código se vuelve menos legible para quien venga después.
• Reintroduces los problemas de coerción que TypeScript intenta resolver.

Usa tipos específicos siempre que puedas: string, number, boolean, o interfaces propias.

Cómo conectar el componente Counter con App

Una vez tipado tu componente, el siguiente paso es importarlo y usarlo dentro de App. La estructura sigue siendo la misma de cualquier proyecto de React: importas, declaras y renderizas.

tsx import Counter from "./Counter";

function App() { const greet = (name: string): string => { return Hola ${name}; };

console.log(greet("Dev"));

return <Counter />; }

Al abrir el navegador con clic derecho e Inspeccionar, verás el resultado de console.log y el botón funcionando. La diferencia es que ahora todo el flujo está protegido por tipos.

¿Cuándo conviene tipar el retorno de una función? Siempre que la función forme parte de la lógica pública de un módulo o componente. Tipar el retorno evita ambigüedades y documenta el código sin necesidad de comentarios extra.

Tipar useState con generics, declarar tipos de entrada y salida en tus funciones, y huir del any son tres hábitos que transforman cualquier proyecto de React en una base sólida. ¿Ya tipaste tus hooks favoritos? Cuéntame en los comentarios cuál fue el primer error que TypeScript te ayudó a cazar.