Primeira aplicação em React com Typescript
Recentemente comecei a explorar um pouco mais React com Typescript. Parece que finalmente a guerra entre Flow e Typescript, dois jeitos diferentes de tipar gradualmente seu Javascript, chegou ao fim, com o Typescript se sagrando vencedor dessa disputa.
Fiquei muito curioso para saber como Typescript encaixaria com React, pois minha experiência com o Typescript foi apenas utilizando Angular 7, o que não quer dizer muita coisa, pois o mesmo utiliza uma abordagem mais voltada a programação orientada a objetos, diferente do React que tem uma abordagem de programação funcional.
Decidi começar a escrever aplicações com essa abordagem e relatar meu aprendizado no meio desse processo!
Vamos utilizar o Create React App para começar nosso projeto. Para quem não conhece, é um utilitário muito legal e necessário para você começar um novo projeto React sem precisar sujar suas mãos com Webpack e Babel, é uma ferramenta muito boa pois pula todo passo de configuração.
Esse comando vai criar uma nova aplicação React já usando Typescript, semelhante a um projeto usando Javascript, com a diferença sendo que usamos a extensão tsx, versus o formato js ou jsx. Esse formato de arquivo nos permite usar JSX com o Typescript.
Exclua os App.css e App.test.tsx e vamos começar nosso exemplo
Nosso objetivo é adicionar e diminuir o valor da tela conforme o botão que apertamos. Vamos adicionar os botões e o contador:
O tipo React.FC é usado para representar um componente funcional(Functional Component, por isso o FC).
Precisamos representar o estado do nosso contador. Para isso, vamos usar hook. Um hook é uma função especial que, por exemplo, nos permite utilizar estado sem que os nossos componentes sejam classes(Class Component). De forma genérica, podemos utilizar recursos do React que antes não eram disponíveis para componentes funcionais de forma simples e declarativa.
O useState é uma função que retorna um par de elementos:
- O primeiro é o valor do estado, será o que usaremos para representar o contador.
- O segundo é uma função especial que serve para alterar o valor do estado.
Se você rodar a aplicação, verá que o nosso valor inicial, 0, está no meio dos botões de adicionar e diminuir. Agora precisamos mudar o valor do nosso contador ao clicar nos botões de adicionar e diminuir e vamos usar nossa função especial setCounter para isto:
O que fizemos acima foi adicionar um event handler onClick para ambos os botões e passarmos funções anônimas que executam uma adição ou subtração no counter.
Podemos refatorar o código acima pra deixá-lo mais legível:
No próximo artigo vamos fazer outro exemplo explorando mais o sistema de tipos do Typescript, aproveitando a checagem de props automática que eles nos fornece.
Se você encontrar algum erro ou uma maneira mais idiomática de escrever isso, deixe nos comentários.
Até a próxima!!!
