Do Javascript ao Typescript, Why?

Antes de tudo, quero deixar claro que esse não é um post sobre uma verdade absoluta, qualquer desenvolvedor mais experiente sabe que a linguagem é uma ferramenta, e não existe uma ‘ferramenta perfeita’, mas sim aquela que melhor se adapta as condições do que você precisa construir.

Mas o que é Typescript? (TS para os íntimos)

Traduzindo em palavras simples: Typescript é um superconjunto de Javascript, sendo o principal recurso a tipagem da linguagem, além de ferramentas interessantes como checagem estática, criação de interfaces, generics, tuplas e outras coisas que vão te ajudar (e muito) no processo de desenvolvimento.

Sim, TS foi desenvolvido e é mantido pela Microsoft (sei que alguns devs torcem o nariz quando lêem esse nome) e um dos primeiros grandes frameworks a adotarem ele como linguagem foi o Angular a partir da sua versão 2.

Show me some code…

Chega de conversa e vamos ao código certo? Vejamos alguns exemplos de como usar as maravilhas do TS.

Tipos

Não é obrigatório usar tipagem no Typescript, mas por razões óbvias é importantissimo que se use, uma dessas razões é pelo simples fato de reduzir bugs no estágio de desenvolvimento, a tipagem permite que você escreva um código coeso, legível, e livre de erros. Vamos a um exemplo simples:

Função de soma simples em Javascript.

Esta tecnicamente é uma função de somar dois números, mas o que acontece se passarmos um número e uma string como parametros? Ou até mesmo se passarmos duas strings? Teremos um comportamento inesperado não é mesmo?

¯\_(ツ)_/¯

Numa aplicação complexa isso pode ser um problema, afinal nem sempre controlamos a estrutura de dados com que lidamos (vinda de uma API externa por exemplo), isso faz com que nosso código fique susceptivel a falhas, e a tipagem pode resolver isso lindamente, vejam só:

A mesma função de soma reescrita em Typescript.

Vejamos só o que acontece, antes mesmo de tentarmos ‘rodar’ esse código se usarmos diferentes tipos de dados nos argumentos dessa função:

Legal né, a checagem estática já fala pra gente que tem um problema ali. E é um problema de TIPO.

Perceberam como é útil? Isso reduz MUITO a quantidade de erros no código, porque estamos validando o funcionamento dele antes mesmo de executarmos alguma coisa, e qualquer outro dev que olhar para esse código já vai entender tranquilamente o que ele espera de parâmetros e o que ele faz.

Legibilidade, tenham essa palavra em mente sempre que estiverem desenvolvendo, sabe quando você vai ao médico e ele te dá uma receita com uma letra que o farmacêutico não consegue ler? NÃO SEJAM ESSE CARA.

Interfaces

Diversas vezes precisamos criar estuturas mais complexas, tipagens mais complexas, pra isso existem as interfaces, com elas podemos criar nossos próprios tipos:

Criamos uma interface para tipar uma estrutura de dados especifica do nosso código.

Com isso podemos criar, nomear e usar tipos específicos para determinadas situações, isso nos dá flexibilidade, confiabilidade e novamente legibilidade no código, não existem limites, sendo assim conseguimos tipar TODO tipo de coisa que quisermos.

Generics

“Ok Diego, falamos de tipos, interfaces e de como isso pode nos ajudar no desenvolvimento, mas e se eu quiser tipar alguma coisa cuja estrutura de dados não foi bem definida ou uma função que aceite mais de um tipo de parametros ou retorno?” — Até aqui, Provavelmente você.

Bom, para isso o Typescript nos fornece os Generics, que simplificando é uma forma de tipar as coisas dinamicamente, permitindo que você crie coisas bastante flexiveis (normalmente usamos muito em funções). Show me some code…:

Note que as duas ultimas chamadas estão indicando um erro, mas porque?

No exemplo acima eu estou criando uma função chamada doWhatever e utilizando um generic <T> em seguida eu estou utilizando esse dado para tipar o meu parâmetro param e também o retorno; na chamada da função eu indico qual tipo ela deve utilizar, assim ela captura o tipo e faz o que é preciso. Nas duas ultimas chamadas da função neste exemplo, temos um erro justamente porque estamos passando um tipo para o generic diferente do tipo do parametro da função, maneiro não?

Vocês podem estar se perguntando porque não utilizamos o tipo any ao invés de generic, bom, quando você tipa alguma coisa com any, você está dizendo para aquela coisa aceitar TODOS os tipos possiveis, ou seja, “aceite qualquer coisa” é o que você está dizendo. Quando utilizamos o generic nós estamos capturando o tipo que nos é passado, como no exemplo acima quando damos um tipo X no generic e passamos um tipo Y no argumento houve um erro na checagem, se tivessemos utilizado o any esse erro não ocorreria, mas na execução da função poderia implicar em um funcionamento inesperado.

Classes

Mesmo no Javascript classes não são novidades desde o ECMAScript 2015 e assim como na maioria das linguagens de programação orientadas a objeto, as classes em Typescript tem funcionamento semelhante:

Estrutura de uma classe simples.

Trocando em miúdos: nós definimos uma interface SinglePerson para nos ajudar a tipar a propriedade person da nossa classe, logo depois chamamos o método construtor que usa essa propriedade para criar o nosso contexto do this (afinal queremos o acesso a esse dado em todo o escopo da nossa classe), logo em seguida temos um método chamado greet que utiliza esses dados para nos retornar uma mensagem de ‘oi’.

Um exemplo de como criar uma classe com métodos extremamente úteis no dia a dia.

Considerações

Como dito no início desse post, usar ou não usar determinada stack ou linguagem é uma decisão de arquitetura e não ‘o que seu coração mandar’, o que abordamos aqui não foi para convencer você que está lendo a mudar a linguagem que utiliza hoje, mas sim para apontar apenas alguns dos benefícios que o Typescript nos dá. Dúvidas, sugestões ou críticas? É só entrar em contato comigo em alguma das minhas redes.

That’s all folks…