TYPESCRIPT

30/10/2022

O que é TypeScript e porque você deve começar a usar

O que é TypeScript?

TypeScript é uma linguagem fortemente tipada (já irei explicar este termo) construída encima do JavaScript, ou seja, seu código em JavaScript é 100% compatível com TypeScript, mas não o contrário. Costumamos falar que o TypeScript é um superset que serve para potencializar o JavaScript.

Você já viu na prática o que é tipagem forte se já programou em linguagens como C, C++, C#, Java etc. Falar que uma linguagem é fortemente tipada significa que os objetos e variáveis desta linguagem tem um tipo bem definido e precisam ser informados no momento de sua declaração. Veja o seguinte exemplo escrito na linguagem Java:

 int numero = 5;
 char palavra = 'a';
 boolean verdade = true;
 numero = 'b'; // erro, só pode receber números inteiros

Repare que para cada variável, eu preciso informar qual seu tipo. Se criado uma variável do tipo int, só poderá ser atribuído números inteiros a essa variável, caso você tente passar outro tipo de valor, como uma letra, verá que o compilador retornará um erro, como visto no código acima.

Agora, usando o mesmo exemplo, mas com JavaScript:

let meuNumero = 5;
let minhaLetra = "a";
let verdade = true;
meuNumero = "b"; // agora, a variável “meuNumero“ deixou de ser 5 e passou a ser 'b'

Por isso falamos que o JavaScript é uma linguagem fracamente tipada, nele não precisamos definir o tipo das variáveis ao declará-las, e esse tipo pode ser alterado a qualquer momento, sendo dinâmico. Assim, uma mesma variável pode receber valores numéricos, texto, booleanos, dentre outros.

Você pode estar pensando: “isso é ótimo!“, e eu te digo que, nem sempre.

Linguagens fracamente tipadas facilitam o experimento e são mais flexíveis, o que pode ser muito útil para quem está aprendendo justamente por conta da simplicidade de codificação, mas conforme nosso projeto JavaScript cresce, a complexidade aumenta e mais casos precisamos prever e cobrir em nossos testes.

Inicialmente esta abordagem é eficiente para micro-serviços, pequenos componentes e SPAs. Mas quando passamos a ter uma aplicação com mais responsabilidades e mais pessoas contribuindo, não ter uma arquitetura e patterns adequados fará com que nosso projeto comece a ter problemas.

A prática e academia ensina que, a ausência de padrões e de uma arquitetura adequada, vai se manifestar em bugs e dificuldades para se identificar erros.

Muito dos erros de softwares podem ser evitados durante o desenvolvimento, é aí que entra o TypeScript.

Porque usar?

O nome TypeScript surgiu da combinação de palavras Type (tipo em português) + JavaScript, que representa a sua finalidade mais importante: a tipagem estática.

Veja o seguinte código escrito em JavaScript:

let x = 1; // x é do tipo number
x = "um texto qualquer"; // agora, x é do tipo string

Em TypeScript, o mesmo código poderia ser escrito da seguinte forma:

let x: number = 1;
x = "um texto qualquer"; // erro, pois x é do tipo number e deve receber um número

Claro que este exemplo é muito pequeno e simples para se enxergar a real importância que a tipagem traz para o desenvolvimento. Vamos supor que você tenha criado uma função dentro de seu código, após alguns dias, você precisa usar esta função mas se esquece sobre seu funcionamento, como por exemplo, o que ela esperava receber como parâmetro e o que retornava. Além disso, há outras situações, como trabalhar em equipe e precisar usar funcionalidades feitas por outros desenvolvedores. Analise o seguinte código escrito em JavaScript:

function trazerInformacoesPai(pessoa) {
  // código...
}

Você não saberia me dizer com precisão o que precisaria ser passado para o parâmetro “pessoa“, correto? Seria preciso ler o código para entender. Será que a função espera receber o nome de uma pessoa (string)? O que ela exatamente retorna? Pelo nome, presumo que ela me traga informações sobre o pai da pessoa passada como parâmetro, mas quais informações exatamente?

Veja agora com TypeScript:

 interface Pessoa {
   nome: string;
   idade: number;
 }
 
 interface Pai {
   nome: string;
   idade: number;
   quantidadeFilhos: number;
 }
 
 function trazerInformacoesPai(pessoa: Pessoa): Pai {
   // código...
 }

Repare que agora sabemos o formato esperado pelo parâmetro da função, que é um objeto do tipo Pessoa, no qual tem um nome e uma idade. Agora também sabemos o tipo do retorno da função (logo antes da primeira chave que abre o corpo da função), então eu também sei que esta função me retornará um objeto do tipo Pai, que por sua vez, tem um nome, idade e quantidade de filhos.

Dessa forma, não seria mais necessário ler o código da função para saber o que ela espera receber e o que ela retorna, essas informações auxiliam na confiabilidade do código, uma vez que não seria permitido passar parâmetros que não fossem esperados, o que também poderia retornar valores inesperados, resultando em um código bugado.

Caso você tente passar um nome (string) como parâmetro para dentro da função, como por exemplo “Caio“, o TypeScript irá informar um erro pois a função recebe um objeto do tipo Pessoa e não uma string. Percebe como isso traz uma grande segurança e clareza para o desenvolvimento? Este exemplo também é algo pequeno e simples, escale isso para um código maior, mais complexo, com uma equipe maior e veja como o TypeScript pode ajudar o desenvolvimento de sua aplicação.

IntelliSense

Ao programar, você pode notar que usando o ponto após uma variável, seu editor de código lhe mostra os atributos e métodos inerentes ao tipo daquela variável, isto é o IntelliSense (inteligência) do seu editor de código te ajudando, por exemplo:

let meuArray = [];

/* Ao colocar o ponto logo após a variável “meuArray“, seu editor de código irá
 mostrar métodos e atributos que um Array tem, como por exemplo: o forEach */
meuArray.forEach(/* código... */);

Ao usar uma linguagem fracamente tipada, como o JavaScript, em muitas situações seu editor de código não reconhecerá o tipo da variável no qual você está trabalhando, consequentemente o IntelliSense não funcionará como esperado. Ao estabelecer tipos ao nosso código com ajuda do TypeScript, este tipo de problema é solucionado, o que traz uma maior produtividade ao desenvolvedor, que não precisará ficar pesquisando os atributos e métodos da variável em questão.