top of page
Foto do escritorFábio Henrique

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.

1.762 visualizações2 comentários

Posts recentes

Ver tudo

React básico

2 Comments


Josué Alves
Josué Alves
Jan 16, 2022

e se eu receber um array de objetos como props, como poderia tipa-la?

Like
Fábio Henrique
Fábio Henrique
Jan 16, 2022
Replying to

Você se precisar acrescentar o colchete na frente do tipo. Exemplo: hobbies: string[]

Like
bottom of page