Introdução ao TypeScript - O que é, suas vantagens, e conceitos fundamentais

O JavaScript tem ganhado cada vez mais espaço no desenvolvimento de sites e sistemas nos últimos anos. Hoje em dia é muito comum ver projetos que utilizam JavaScript em sua inteira estrutura.

E há uma ferramenta que pode ajudar o nosso código a se tornar ainda mais maduro e robusto, o TypeScript. Mas, o que é o TypeScript, e quais são as vantagens que ele nos traz?

O que é o TypeScript

O TypeScript é um superset, ou superconjunto, da linguagem JavaScript. Foi criado em 2012, por Anders Hejlsberg (o mesmo criador do compilador Turbo Pascal e das linguagens Delphi e C# ?). O TypeScript é mantido pela Microsoft e possui o próprio Anders como o líder do projeto.

O TypeScript é uma linguagem criada em cima do JS e permite que adicionemos tipagem de dados em nossas variáveis, além de nos oferecer recursos avançados, como a Orientação a Objetos e padrões de projeto.

Mas algo importante que precisamos saber é que o TypeScript não veio substituir o JavaScript. Na realidade, eles trabalham em conjunto. Além disso, os navegadores não conseguem ler arquivos .ts. Por isso, o TypeScript é usado apenas no momento do desenvolvimento. No final usamos o seu compilador para transformar nosso código TypeScript em JavaScript.

Vantagens em usar TypeScript

Tipagem de dados

O JavaScript é uma linguagem fracamente tipada. Isso não é ruim, apenas significa que não precisamos informar o tipo das variáveis no momento em que as criamos, e nos permite mudar o tipo delas se desejarmos.

Isso nos dá muita liberdade ao utilizar a linguagem JavaScript, além de facilitar seu aprendizado e que comecemos um novo projeto com ela.

Entretanto, quando utilizamos uma linguagem que não é fortemente tipada, pode ser que cometamos erros ao longo do desenvolvimento relacionados com os tipos das variáveis, e que não iremos notar, o que resultará em muita dor de cabeça até encontrar os bugs.

Com o TypeScript, podemos definir os tipos para nossas variáveis. E caso cometamos algum erro, o próprio TypeScript irá nos alertar sobre isso. Assim, poderemos consertá-lo no desenvolvimento, garantindo que o nosso código chegará na produção realmente funcionando.

Vamos ver um exemplo: imagine que criemos uma variável com TypeScript que possui uma string. Para definir seu tipo como string, basta informar o sinal de : (dois-pontos) e a palavra string. Daí, imagine que tentamos acessar o método toLocaleDateString() a partir dela. Esse é um método voltado para datas:

let minhaVariavel: string;

minhaVariavel = "Eu não sou uma Data";

console.log(minhaVariavel.toLocaleDateString());

Como nosso código é TypeScript, o resultado será o seguinte:

Note que o método ficou com um tracejado vermelho e com uma mensagem de erro, que informa que a propriedade toLocaleDateString não existe em variáveis do tipo string. Assim, podemos identificar o erro e consertá-lo. Bem útil, não é mesmo?

Acesso a recursos avançados

A partir de 2015, o JavaScript tem recebido a adição de recursos incríveis, como alguns conceitos da Orientação a Objetos. Entretanto, pode ser que ainda sintamos a falta de alguns recursos muito úteis, como interfaces, ou uma maior quantidade de modificadores de acesso em propriedades e métodos, o que nos permitiria aplicar por completo o conceito de encapsulamento.

O TypeScript nos permite adicionar esses conceitos. Veja por exemplo o código abaixo:

interface Funcionario {
	nome: string;
	salario: number;
}

class Financeiro implements Funcionario {

	nome: string;
	salario: number;

	constructor(funcionarioNome: string, funcionarioSalario: number) {

		this.nome = funcionarioNome;
		this.salario = funcionarioSalario;

	}

}

Esse código não funcionaria com JavaScript, mas usando o TypeScript nós podemos utilizá-lo. Isso nos abre portas para o uso de paradigmas de programação muito comuns em grandes projetos, como a própria Orientação a Objetos, como também a implementação de padrões de projeto no TypeScript. Isso é muito promissor, não é mesmo?

Mas talvez nos perguntemos: “Como o TypeScript consegue fazer com que esses recursos funcionem no JavaScript, visto que eles ainda não existem na linguagem?” Isso nos leva para nosso terceiro ponto

Compilador TypeScript e retrocompatibilidade

O Compilador TypeScript ou TypeScript Compiler, também conhecido como TSC, é responsável por transformar nosso código TypeScript avançado em uma sintaxe JavaScript que pode ser entendida até mesmo pelos navegadores mais antigos. Na realidade, por padrão, o TypeScript transforma nosso código em ECMAScript 3, que foi lançado em 1999 ?.

Claro que é possível mudar essa configuração. De qualquer forma, se você precisa criar sistemas que precisam funcionar em browsers mais antigos, o TypeScript é a solução.

Vamos ver um exemplo disso: o recurso de funções assíncronas foi adicionado ao JavaScript no ano de 2017. Vamos criar um código em TypeScript que irá utilizá-lo (à esquerda) e então ver o código JavaScript que ele irá resultar (à direita):

Impressionante o código JS final, não é mesmo? Mas ele irá funcionar utilizando os tipos e recursos do TypeScript.

Excelente integração com o Visual Studio Code

O Visual Studio Code é atualmente um dos editores de texto mais usados no mundo do desenvolvimento. Ele também é da Microsoft e usa o TypeScript em sua estrutura. Isso significa que nós já sentimos os efeitos do TypeScript em nosso trabalho, mesmo que ainda não o utilizemos em nosso código.

Um dos recursos mais interessantes desse editor de texto é o IntelliSense, que nos faz sugestões de comandos que podemos usar em nosso código, além de realizar o autocompletar. Como essa tecnologia usa TypeScript e como o TypeScript nos obriga a definir os tipos em nossas variáveis, o IntelliSense irá funcionar ainda melhor conosco. Vamos ver um exemplo.

Lembra do código que fizemos antes, chamando um método de datas em uma string? Imagine que queremos consertá-lo. Ao digitar apenas duas letras, já veremos os métodos de string que podemos utilizar:

Esse recurso é bem prático e nos ajuda a criar códigos mais rapidamente ?.

Por onde começar?

O JavaScript já é uma linguagem incrível. Mas com o uso do TypeScript ela pode se tornar ainda mais fenomenal. Podemos dizer que o TypeScript como que dá “superpoderes” para o JavaScript, e aumenta o horizonte de possibilidades do uso desta linguagem.

E o melhor, como o TypeScript é basicamente JavaScript com a anotação de tipos, se tivermos uma boa base da linguagem JavaScript, estaremos prontos para iniciar o estudo do TypeScript. Para isso possuímos nosso curso Dominando TypeScript, onde abordamos todos os conceitos do TypeScript: Tipagem dos dados, Interfaces, Orientação a Objetos, Generics, Decorators, e mais ?.

Até o próximo artigo :)