Há um bom tempo venho estudando React + Typescript. Já que considero o Typescript uma forma de minimizar os bugs que encontramos nas Aplicações, além de facilitar a manutenção e desenvolvimento do software.
Durante o desenvolvimento de uma aplicação usada para estudar essa stack eu resolvi utilizar a biblioteca Styled Component para ajudar na organização e construção do código.
Foi durante o desenvolvimento dessa aplicação que surgiu uma dúvida crucial para continuar o desenvolvimento "Como eu devo usar essa ferramenta?", Visto que o mesmo código que eu utilizava no javascript agora não estava funcionando mais no Typescript.
Sendo assim, depois de pesquisar bastante e conseguir implementar minha aplicação eu resolvi escrever esse artigo para os iniciantes que tiveram o mesmo problema que eu no inicio de seus estudos com essa stack.
Desta forma, neste artigo eu vou mostrar como criar alguns componentes para serem usados na sua aplicação usando React native + Styled Component + Typescript. Não pretendo me aprofundar em todos os temas para não prolongar muito.
Por que foi escolhida essa Stack?
React Native foi escolhido por ser uma plataforma versátil que pode ser usada para desenvolver tanto para Android como para IOS de forma performática. Um outro ponto muito importante é que podemos utilizar boa parte do conhecimento aprendido também no React.js, já que essas duas plataformas se aproximam muito em questão de semântica de código.
A escolha do Styled Component é por causa que melhora a legibilidade e manutenção do código escrito, uma vez que permite que eu adicione estilização diretamente aos componentes da plataforma, tanto os nativos como os customizados.
Iniciando o desenvolvimento
Neste artigo não iremos fazer uma aplicação totalmente funcional, irei direto no que interessa que é mostrar como codificar os componentes usando as ferramentas mencionadas.
Primeiro passo para começarmos o desenvolvimento é iniciar o projeto usando o template de "react-native-template-typescript', caso surja alguma dúvida sobre esse processo consulte a documentação aqui.
sudo npx react-native init myproject - template react-native-template-typescript
O segundo passo que eu sempre faço é remover os arquivos desnecessários e criar uma outra estrutura inicial com a configuração das rotas e das pastas. recomendo consultar o repositório do github.
Para prosseguir com o artigo você vai precisar adicionar as seguinte dependência em seu projeto:
yarn add styled-components
e também vai precisar adicionar a tipagem de forma independente:
yarn add @types/styled-components-react-native
Button
O primeiro componente que vamos construir é um Custom Button para fazer ele vamos precisar de um TouchableOpacity, View e de um Text.
No arquivo de index vamos fazer a estrutura do componente. Para isso vamos definir uma interface que estende as propriedades do TouchableOpacity e adiciona mais três propriedades: isDisable (Opcional), color(obrigatória) e children (obrigatória).
A seguir podemos ver o código final:
No arquivo de estilos vamos definir os seguintes componentes:
Container: Ele é apenas uma View estilizado então não precisamos passar as propriedades que ele recebe.
Touchable: Nesse componente eu utilizado algumas propriedades customizadas então precisamos definir uma interface para esse componente.
Text: Também vamos precisar adicionar uma interface, porquê recebemos alguns propriedades customizadas.
Você pode conferir o código final a seguir:
TextInput
Este Textinput é um pouco mais complexo. ele foi construindo usando outros componentes também feito usando styled, como já expliquei no componente anterior.
Uma observação que podemos pegar deste componente é que não precisamos criar uma nova interface para as propriedades, já que o componente não está recebendo nenhuma nova propriedade, então podemos usar diretamente o TextInputProps.
Já no caso dos estilos vamos precisar adicionar uma nova interface, porquê a cor do label depende do estado do componente total, como podemos ver a seguir:
Observações
Alguns pontos precisamos destacar neste artigo para que você não tenha problemas é o seguinte:
Algumas bibliotecas não vem com a tipagem por padrão junto com a biblioteca principal então precisamos instalar ela de forma separada usando a dependência @types/styled-components-react-native é preciso tomar cuidado para não cair nesse erro.
O segundo ponto é que sempre que você precisar usar uma propriedade customizada para algum componente estilizado você vai precisar usar alguma tipagem importada da biblioteca mencionada no paragrafo anterior.
Um exemplo disto é o botão que construímos a cima que precisou usar o TouchableOpacityProps para que na hora que o desenvolvedor precise usar em uma tela ele consiga ter acesso a todas as propriedades disponível nativamente + as Types que você configurou.
E por fim uma outra coisa bastante importante é definir os retornos das funções de acordo com o componente que você está usando como fizemos em todos os componentes customizados anteriormente.
Conclusão
Com esse artigo espero que você tenha conseguido tirar aquela dúvida que estava te impedindo de prosseguir no desenvolvimento da sua aplicação
Se surgiu alguma dúvida ou viu algum erro por favor entre em contato comigo através das minhas redes sociais:
Refêrencia:
https://styled-components.com/docs
https://reactnative.dev/docs/typescript
https://www.typescriptlang.org/docs/home.html
https://blog.rocketseat.com.br/typescript-vantagens-mitos-conceitos/
Créditos da imagem:
Photo by Fotis Fotopoulos on Unsplash
Top comments (0)