Introdução
Ao migrar do JavaScript para o TypeScript, apesar de todos os benefícios, podem surgir algumas dúvidas durante o desenvolvimento.
Uma delas é referente a representação do modelo de dados dos nossos objetos em uma interface. Em particular, eu senti um pouco de dificuldade na declaração de alguns objetos, e acabava utilizando mais any do que o necessário, tirando todo o sentido de se utilizar o TypeScript.
Em virtude disso, decidi fazer esse post com uma dica bem simples sobre a declaração de event listeners em um interface, então vamos nessa!
Qual a diferença entre uma interface e uma classe?
Para entendermos melhor como funciona uma interace, é totalmente válido fazermos um comparação com as classes do TypeScript.
Apesar de ambos serem utilizados para representar o modelo de dados dos nossos objetos, porém as interfaces serão completamente removidas durante a transpilação.
Uma desvantagem de se utilizar classes é a quantidade de código desnecessário que será gerado em um projeto com dezenas de objetos.
Mas chega de perder tempo, vamos descobrir como definir um event listener.
Como saber como deve ser definido um event listener?
Qualquer tipo de objeto em uma interface pode ser definido usando o any, mas isso compromete a tipagem do TypeScript e não é uma boa prática.
Então como eu posso declarar um event listener como o onClick?
Faça da seguinte forma:
interface Props {
onClickClose: (event: MouseEvent<HTMLButtonElement>) => void;
}Ta ok, eu já informei a solução, mas como eu cheguei a ela? Simples, basta posicionar o curso sobre o event listener que você deseja declarar na interface.
Supondo que você esteja no VS Code, a própria tipagem do TypeScript permitirá que você visualize o tipo de dado.
Exemplos:
Conclusão
Por hora é só pessoal! O post de hoje foi mais curtinho mas eu espero que possa ter contribuído com boas práticas no TypeScript.
Fique de olho também nos próximos posts sobre o TypeScript, e se surgirem dúvidas ou sugestões, não deixem de mandar aí nos comentários!