¿Cómo usar TypeScript con React para evitar bugs?

RI ricardo84 BR 🔍 Entusiasta 👁 71 ⚑ Denunciar Programación

Estoy desarrollando un proyecto React aquí y decidí probar TypeScript para ver si realmente mejora. Pero me está resultando un poco confuso integrar los tipos con componentes, hooks y props. ¿Alguien que ya usa consigue darme un consejo de cómo empezar sin perderme demasiado?

2 respuestas

★ Mejor respuesta

El truco es empezar tipando las props de tus componentes con `interface` o `type`, tipo `interface Props { nombre: string; edad: number; }` y después usas eso en el componente `function Comp({ nombre, edad }: Props)`. Para hooks, TypeScript ya infiere bastante solo (si usas `useState(0)`, sabe que es number), pero cuando viene un objeto más complejo ahí tipas manualmente: `const [user, setUser] = useState<{ name: string; email: string } | null>(null)`. Empieza por ahí, deja que lo demás venga gradualmente - no intentes tiparlo todo de una vez o se vuelve un caos.

Empieza tipando las props con `interface` obvio, pero el truco está en usar `React.FC<Props>` o mejor aún solo `function Comp(props: Props)` para no tener confusión con la tipificación de children. Lo que pasa con mucha gente es intentar tiparlo todo desde el primer día - enfócate en props y estado primero, deja los tipos implícitos en algunos lugares que TypeScript infiere solo, si no terminas con esa sensación de estar peleando contra el lenguaje en lugar de usarlo a tu favor.

Tu respuesta

Iniciar sesiónpara responder.