Tipando props no React

Quem trabalha com React sabe que a medida que o projeto cresce fica um saco saber o que tem dentro dos props em cada componente. E é por isso que eu vou mostrar agora como tipar os props de forma que o IntelliSense mostre o que de fato há neles.

Hands On

Eu fiz este exemplo no codesandbox.io que um ótimo para treinar tecnologias como React, Vue, Angular, Javascript etc. Nele é possível fazer tudo online e nenhum tipo de cadastro é exigido para isso.

Tipar os props do React requer que você use o Typescript

Como é possível ver na imagem acima o truque consiste em criar uma Interface TypeScript com as propriedades que o componente deve ter e dizer ao componente que seu parâmetro props é do tipo desta Interface. Note que assim que acessamos props o IntelliSense entra em ação nos mostrando o que há dentro dele.

Esta dica é bem simples porém extremamente útil. Você pode ver todo o código deste exemplo clicando aqui.