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.710 visualizações2 comentários

Posts recentes

Ver tudo
Nunca perca um post. Assine agora!

Fique sempre por dentro das dicas ninjas de programação com o uso de stacks poderosas como React, Angular, NetCore e muito mais!

© 2020 por equipe DevNinja.

  • Facebook
  • Twitter
Ativo 4.png
bottom of page