6 porquês do Typescript
Recentemente na Brainny começamos a identificar a necessidade de organização de código e documentação do que estamos criando, para assim re-utilizarmos no futuro ou até mesmo para dar manutenção no código. Nosso primeiro projeto foi em Spring Boot, então isso da ao nosso time uma boa base em linguagem tipada, como o Java.
Nesse artigo, venho levantar pontos que nos levaram a começarmos a utilizar Typescript como principal tecnologia na nossa stack. Hoje nossa stack está baseada em NestJS e GraphQL no back-end e React/React Native com Typescript para o front-end.
1 — Tipagem
Typescript nos permite facilitar o desenvolvimento e manutenabilidade do projeto. Consegue-se criar funções, onde são definidos todos parâmetros esperados, assim como o retorno da mesma, desta forma aumentando velocidade de desenvolvimento no futuro, pois quando for utilizar essa função, a IDE irá auto-completar todos parâmetros e já informar se dará erro por falta de parâmetros ou se está faltando o retorno correto dentro da função.
2 — Qualidade de Código
A qualidade de código é algo crucial para um time de desenvolvimento, e quando se tem muita liberadade, a qual o Javascript nos trás, é facil acontecer de um projeto ficar com diversas padronizações aplicadas e má organização.
Quando se aplica Typescript, temos a possibilidade de organizar melhor o projeto e fazermos melhor utilização das boas práticas e padrões da orientação a objetos. Podemos assim, utilizar a tipagem a nosso favor, sem abrir mão no Javascript.
3 — Proptypes
No React, é normal utilizarmos a biblioteca Proptypes para validação e declaração de propriedades dos nossos componentes, mas estas validações ocorrem em tempo de execução, assim dificultando para encontrar erros pela IDE.
Já com Typescript, declarar as propriedades de um componente deixa elas disponíveis durante o desenvolvimento e com isso na IDE temos o auto-complete de todas propriedades quando chamar o componente. Ainda conseguimos navegar entre o código com atalhos do editor e não tem custo em tempo de execução.
Isso facilita a criação de componentes reutilizaveis, pode-se criar os mesmos fortemente tipados para assim quando for importar em outros projetos, ter a certeza do que é necessário passar para ele acertando-se que irá renderizar corretamente.
4 — Geração de Schemas GraphQL
No back-end, com a abordagem de code-first no GraphQL temos a possibilidade de gerar todo o schema a partir de nossas classes Typescript utilizando anotações.
Esse tópico foi um dos principais motivos de migrarmos para o Typescript. Antes utilizando Javascript puro com Apollo, precisavamos praticamente codificar tudo duplicado, pois assim como tinhamos que declarar nossas entidades para o nosso banco de dados, tinhamos que declara nossos types para o GraphQL, e com a abordagem code-first no Typescript, conseguimos fazer as duas coisas, em uma só classe aumentando bastante a produtividade.
5 — Geração de Componentes/Hooks para React
Já no lado front-end em Javascript a cada Mutation e Query é necessário declarar o corpo de cada requisição GraphQL, informando exatamente os campos que queremos enviar e buscar.
Dentro de um componente, montariamos a requisição para poder consumir a API GraphQL, e isso gera bastante código sujo para o componente no momento que temos uma ou mais Query/Mutation.
Com Typescript e o GraphQL Code Generator, temos a possibilidade de a partir de um schema GraphQL, gerar todos os types do mesmo e utilizar no front-end, com isso existe plugins onde além de criar os types, ele também consegue implementar High Order Components e Hooks para consumir a API, limpando muito o código e aumentando bastante a produtividade por não ter que desenvolver quase nenhum consumo de API no front-end.
6 — Optional Chaining
Em diversos códigos feitos com React presenciamos o seguinte caso:
E em recorrente situações temos que ficar revalidando os objetos para que não lance a famosa exception: Cannot read property of undefined 😡
A partir da versão 3.7 do Typescript, foi implementado o Optional Chaining assim facilitando a implementação de código como esses, ficando basicamente:
Por mais pequeno que pareça no exemplo, isso diminui muito código em desenvolvimento.
Typescript tem seus beneficios mas tem seu maleficios também, tornando mais verboso o desenvolvimento, aumentando a curva de aprendizado do Javascript, mas com certeza tendo ele na ponta da língua, terá beneficios no futuro com a implementação.
Não estou aqui dizendo que você deve utilizar Typescript, mas com certeza ao menos avaliar se encaixa com o seu time a implementação do mesmo.
Deixo aqui algumas referencias para continuar pesquisando sobre o assunto.
- Repositório do Github do Awesome Typescript
- Type-GraphQL — Gerar Types a partir de classes Typescript
- GraphQL Code Generator — Gerar Hooks e HOC em Typescript a partir de uma API GraphQL
- TypeORM — ORM que utilizamos com Typescript
- NestJS — Framework Typescript para o Back-end
