Como usar o Typescript e quais são as suas vantagens

Para começar, nada melhor do que contar um pouco da história do TypeScript (TS), para que serve e qual é o propósito dessa ferramenta super útil nas nossas vidas. Esse caminho vai te ajudar a criar um contexto sobre o que é o TypeScript e qual é o problema que ele veio resolver, depois vamos mergulhar de cabeça no seu primeiro projeto e como cada parte das configurações funcionam.

Contexto

O TypeScript começou como um projeto interno da Microsoft em 2008, e foi lançado ao público em 1º de Outubro de 2010, com a ideia básica de uma tipagem estática de código JavaScript. O principal foco era no desenvolvimento de aplicações maiores, onde o JavaScript não consegue escalar de forma eficiente (a gente vai voltar nisso).

Apesar do que pensam, TS não é considerado uma linguagem em si, mas sim um superset do JavaScript, ou seja, um superconjunto. Mas falar isso não ajudou muito não é? Então deixa eu te dar um exemplo mais prático. Isso significa que o TypeScript engloba tudo que o JavaScript já tem e estende ainda mais. Portanto, todo o código JavaScript é um código TypeScript válido, mas o contrário não é verdade, por definição.

Usos

Ao contrário de outras linguagens, o TS não foi criado para substituir o JavaScript, mas sim para estender o uso dele, da mesma forma que outra ferramenta chamada Flow havia feito anteriormente. Inclusive, é por isso muita gente fala que o TypeScript em si não é uma linguagem, mas um sistema de tipos que é implementado sobre o JavaScript.

Mas, diferentemente de outros sistemas de tipos que já vieram antes (sim, o TS não é o primeiro, e nem o segundo), o Typescript é considerado um sistema Turing-Completo, isso significa que a gente pode resolver problemas de qualquer complexidade usando somente os construtos que ele oferece. Aliás, existem projetos inteiros como jogos, parsers e até pequenas aplicações feitas exclusivamente usando o sistema de tipos do TypeScript.

Entretanto, é claro que, por não possuir interface, devs precisaram encontrar formas criativas de exibir saídas para os usuários. Um desses exemplos é o TDungeon, um jogo de RPG baseado em texto que é totalmente feito no sistema de tipos do TS.

Crescimento

Um fato interessante é que um dos principais designers e desenvolvedores do TS é um engenheiro de software dinamarquês chamado Anders Hejlsberg. Ele também é o lead designer do C# e criou linguagens como o Delphi e o Turbo Pascal. Inclusive, é por isso que, à primeira vista, um código TS é muito similar a um código C#, principalmente nas estruturas.

Hoje, o TS é uma das ferramentas mais usadas no mundo e uma das mais queridas por qualquer dev porque, entre muitas outras coisas, ela te ajuda a manter a sua sanidade mental em projetos muito grandes.

Por que o Typescript?

Agora que a gente já tem o contexto de onde o TS veio, vamos entender o porquê dele existir.

Durante a minha carreira eu já trabalhei com projetos pequenos e grandes usando JavaScript e a linguagem em si não é o problema. Na verdade, muitos desses projetos só foram possíveis porque o JavaScript é muito mais simples do que outras linguagens. Entretanto, a escalabilidade dessas aplicações pode ser um problema, já que é um reflexo direto de uma tipagem dinâmica que o JS possui. Vejamos isso na prática. Imagine que você tem essa aplicação usando express com Node.js:

Neste exemplo temos apenas três middlewares e já podemos ver que há um problema em saber o que existe dentro de res.locals. Em aplicações maiores, o número de middlewares pode facilmente passar de 30 por rota (é uma má prática, mas acontece). Em casos assim, é impossível saber o que existe dentro desta variável, ainda mais se os middlewares forem definidos em arquivos separados.

Além disso, outro exemplo interessante é quando temos que garantir um determinado tipo de dado. Então vamos supor que temos o seguinte código:

Funções

No JavaScript temos duas funções para cancelar timeouts e intervals, que são clearInterval e clearTimeout, mas elas só podem receber IDs específicos de cada um. Ou seja, se tentarmos usar clearInterval (timeoutId) não vamos obter nenhum resultado, e é aí que o TypeScript vai brilhar com algo do tipo:

Conseguiu pegar a ideia? No fim das contas, o objetivo do TypeScript é exatamente o seu próprio slogan: “JavaScript that scales”, ou seja, “JavaScript que escala”. Porque, com ele, é possível criar aplicações imensas, com muitos módulos e muita complexidade sem perder o rastro dos tipos de cada variável. E isso é especialmente útil quando você está trabalhando com um time, já que o conhecimento da aplicação está distribuído entre muitas pessoas.

Outras vantagens

Outro fator  importante é que o TypeScript reduz drasticamente o que a gente chama de bus factor, que é uma analogia para a quantidade de pessoas que podem estar fora do seu projeto até ele ficar insustentável. Geralmente esse fator está muito atrelado àquelas pessoas que entraram no início do projeto e, por conta disso, tem uma bagagem muito grande sobre as regras de negócio e a própria base de código, mas se elas saírem da sua empresa o projeto acabou, porque ninguém mais sabe nada. Com o TypeScript você pode pelo menos manter um controle maior da base, fazendo com que a passagem de conhecimento seja muito mais simples.

O TypeScript também facilita o debug direto, ou seja, aquele debug que você nem precisa executar o código ou uma suíte de testes para saber que alguma coisa está errada. Isto porque se a tipagem estiver correta você pode resolver problemas complexos sem sequer rodar o código uma só vez. Fora que ajuda na documentação e na arquitetura da aplicação.

Além disso, o compilador do TypeScript também pode fazer várias outras tarefas além de checar os tipos. Inclusive, um dos usos do TS também é para quebrar grandes projetos em projetos menores e juntar tudo usando um modelo de módulos.

Muito bem, te convenci que o Typescript vale a pena? Então vamos aprender a instalar e usar todas as vantagens que ele oferece.

Criando o seu ambiente

O TypeScript pode ser executado em qualquer ambiente e você pode usar qualquer editor para poder criar um arquivo TS. Afinal, hoje em dia a maioria dos editores tem suporte para a análise de tipos do Typescript. Porém, a minha recomendação pessoal é o VSCode já que ele é o editor que foi originalmente construído para se trabalhar com TS. Ou seja, por padrão ele já suporta todas as funcionalidades do Typescript e vem até mesmo com sua própria versão embutida caso você precise analisar algum arquivo e ainda não o tenha instalado na máquina.

Pacotes do NPM e compilação

O TypeScript é escrito em TypeScript (olha que poético) e publicado no NPM como um pacote. Então para começar a usar no seu primeiro projeto é só criar uma nova pasta e rodar o comando npm init -y, e depois instalar o pacote do TypeScript com npm install -D typescript. Além disso, podemos instalar toda a tipagem do Node.js, assim o TS vai saber tudo sobre o ambiente que estamos rodando. Para fazer isso, use o comando npm install -D @types/node.

Agora quando falamos da Compilação, o processo é outro.

Quando você instalar o TypeScript, ele vai te dar acesso a um binário chamado tsc, que é o TypeScript Compiler. Ele vai ser o responsável por fazer a transpilação de TypeScript para JavaScript, já que nenhum ambiente (nem o browser e nem o Node.js) rodam TypeScript nativamente.

Antes de tudo, precisamos inicializar o TypeScript na pasta, e podemos fazer isso com o comando npx tsc –init. Agora, você vai ver que há um arquivo tsconfig.json na raiz, e ele será o nosso ponto focal.

Então crie um arquivo sum.ts e coloque esse código lá:

Agora execute npx tsc ./sum.ts e isso deve te dar um arquivo sum.js na mesma pasta. Então experimente executar esse arquivo usando node sum.js e veja o resultado!

TSconfig

O arquivo de configuração do TypeScript é chamado de TS Config, e ele é o coração do projeto todo. A presença do arquivo tsconfig.json indica que essa é a raiz de um repositório TS, e vai ser lá que o Typescript buscará todas as configurações para poder compilar o projeto. Da mesma forma que estamos acostumados com o Node, quando invocamos o compilador do TS, o tsc, sem nenhum tipo de argumento, ele vai procurar o arquivo tsconfig.json mais próximo e vai ler esse arquivo para buscar as opções. Você também pode especificamente dizer qual é o arquivo de configuração que ele tem que usar com o tsc -p <arquivo>.

Além disso, você pode também sobrescrever quaisquer propriedades do tsconfig.json diretamente na linha de comando usando as opções especificadas diretamente, o que é bem útil para quando você precisa alterar alguma coisa em uma compilação específica.

Muito bem, depois de tudo isso, quero passar pelas principais configurações do TSConfig e te explicar para que cada uma delas serve! Mas, antes disso, precisamos entender a estrutura do arquivo.

Campos básicos

Ele começa com os chamados root fields, que são as chaves que dizem para o TS quais são os arquivos que ele vai levar em conta:

Files

Uma lista de nomes de arquivos que devem se incluídos no programa que você está compilando, por exemplo:

Extends

Essa é uma das funcionalidades mais poderosas do tsconfig, permitindo que você estenda outros arquivos de configuração. Inclusive, o TS tem os arquivos base que são arquivos de configuração prontos e configurados. Ou seja, você pode estendê-los diretamente do repositório com extends: “@tsconfig/node16/tsconfig.json”.

Um outro uso muito útil para essa funcionalidade é quando você está trabalhando com monorepos que contêm muitos projetos dentro. Assim, você pode ter o arquivo base na raiz e modificar de acordo com cada projeto. E todas as configurações extras serão tratadas como modificações. Inclusive, se uma opção existir no arquivo base e for sobrescrita no segundo arquivo, a mais recente vai ser o que vai valer.

Include e Exclude

Da mesma forma que o files, o include e o exclude vão controlar quais são os arquivos que você incluirá no projeto, com a diferença de que essas chaves aceitam globs, ou seja, expressões regulares que dão match em um ou mais arquivos. Eles são bem úteis quando você não tem como especificar uma lista de arquivos direta com o files.

Opções de compilação

Esse é o campo mais importante do arquivo, que é o local onde você define como o compilador do TypeScript vai se comportar. Existem muitas opções, então não vou listar todas aqui, mas vou falar de algumas que eu considero mais importantes.

• exactOptionalPropertyTypes: É uma opção que faz com que campos opcionais em interfaces como { color?: ‘blue’ | ‘red’ } sejam mais estritos. Este código seria resolvido para color: ‘blue’ | ‘red’ | undefined. Com isso ativado, o undefined para de ser uma opção.
• noImplicitAny: É uma das opções mais controversas do TS, com a ideia de que essa opcão não permita que o Typescript faça a inferência automática de tipo para o any, que é o flagelo de todos os tipos do TS. Neste caso, quando temos funções como const f = (s) => s o TS vai reclamar que s é any. Eu fortemente recomendo que essa opção esteja ligada porque é a forma mais eficiente de deixar apenas os anys que você quer no código.
• noImplicitReturns: É outra opção da classe noImplicit que eu fortemente recomendo que esteja ativada. Neste caso, essa opção vai garantir que todos os caminhos que você possa tomar retornem um valor.
• module: Modifica a forma como o TS vai carregar os módulos. Geralmente você não vai mudar essa opção, mas cada uma delas vai se comportar de uma forma diferente, alterando o arquivo final.
• paths: Uma opção interessante que deixa que você crie seus próprios import maps, dizendo para o TypeScript como deve carregar um arquivo e, por exemplo, setar algo como:

Além disso, também vai permitir que você escreva import ‘jquery’ diretamente, da mesma forma que usar algo como:

Até a próxima!

Muito bem, agora que já falamos do que você sabia e não sabia sobre Typescript, aproveite todas as suas vantagens e coloque em prática para continuar sua aprendizagem. Para isso, eu recomendo participar de uma Comunidade. É a melhor forma de manter uma ligação direta com outros e outras devs e continuar seu aprendizado. Então se você ainda não conhece a Comunidade que a Impulso mantém no Discord e no WhatsApp, agora é uma boa oportunidade!

Sobre o autor

Lucas Santos é um Impulser Expert. E também é engenheiro de software e vem criando bugs desde 2011. É apaixonado por tecnologia, conhecimento e conteúdo. Acompanhe ele por aqui.

Inclusive, o Lucas acabou de lanças o seu treinamento completo de TypeScript! O “Fomação TS” está disponível no site oficial do curso com um desconto exclusivo de Pré-lançamento.