Como usar TypeScript com React pra evitar bugs?

RI ricardo84 BR 🔍 Entusiasta 👁 70 ⚑ Denunciar Programação

Tô desenvolvendo um projeto React aqui e resolvi tentar TypeScript pra ver se melhora mesmo. Mas tô achando meio confuso integrar os tipos com componentes, hooks e props. Alguém que usa já consegue me dar uma dica de como começar sem ficar muito perdido?

2 respostas

★ Melhor resposta

O truque é começar tipando as props dos teus componentes com `interface` ou `type`, tipo `interface Props { nome: string; idade: number; }` e depois usar isso no componente `function Comp({ nome, idade }: Props)`. Para hooks, o TypeScript já infere bastante sozinho (se usas `useState(0)`, ele sabe que é number), mas quando vem um objeto mais complexo aí tipas manualmente: `const [user, setUser] = useState<{ name: string; email: string } | null>(null)`. Começa aí, deixa o resto vir gradualmente - não tenta tipar tudo de uma vez ou vira um caos.

Começa tipando as props com `interface` mesmo, mas o pulo do gato é usar `React.FC<Props>` ou melhor ainda só `function Comp(props: Props)` pra não ter confusão com tipagem de children. O que pega muita gente é tentar tipar tudo desde o primeiro dia - foca em props e estado primeiro, deixa os tipos implícitos em alguns lugares que o TypeScript infere sozinho, senão fica aquela sensação de tá lutando contra a linguagem ao invés de usar ela a teu favor.

Sua resposta

Entrarpara responder.