TypeScript 3.4: O que veio de novidade?
É isso mesmo galera, o nosso TS está na versão 3.4, hoje eu irei apresentar uma de suas novidades no momento do build, a flag incremental.
Incremental flag
Para quem já está trabalhando com .ts a algum tempo, já conhece como ele funciona, mas para aqueles que estão tendo o seu primeiro contato com ele nesse artigo, o TypeScript é um superset de JavaScript, em outras palavras, nós desenvolvemos em TypeScript e transpilamos para JavaScript.
Abaixo você tem uma imagem demonstrando esse processo.
O seu processo é simples, nós criamos um arquivo .ts e executamos o comando tsc para transpilar esse arquivo para .js.
Mas como funciona esse processo em uma estrutura com mais arquivos? Nós precisamos ficar fazendo esse processo toda vez para cada arquivo?
Não, nós podemos executar o comando tsc — watch para que o compilador do TypeScript fique monitorando e verificando a nossa estrutura de x em x times, fazendo o transpile para .js.
Até aqui tranquilo, não apresentei nenhuma novidade para aqueles que já estão utilizando o TypeScript no seu dia dia.
Agora avançando para nova versão 3.4 do TS, e indo para o tema desse artigo, vamos conhecer a flag — incremental.
Essa nova flag salva as ultimas alterações do compilador, fazendo com que ele seja mais rápido.
Para ficar mais claro, vamos criar um exemplo prático. O primeiro passo será atualizar o TS para nova versão. Para isso, abra um terminal no seu computador e execute o comando abaixo:
npm install -g typescript@latestAgora execute o comando tsc -v para verificar se você está com a ultima versão instalada. Abaixo você tem uma imagem demonstrando esse passo no meu computador:
Com a versão atualizada do TS, crie um novo diretório no seu computador com o nome typescript-news, em seguida crie um novo arquivo chamado tsincremental.ts e atualize ele com o trecho de código abaixo:
Um trecho gigante né? Eu peguei ele para que possamos ver a diferença do compiler utilizando o incremental.
Esse trecho de código foi retirado do site: typescriptlang.
Agora crie um novo arquivo chamado tsconfig.json, em seguida atualize ele com o trecho de código abaixo:
Esse trecho de código está com uma configuração mínima para trabalharmos com o TS, ele irá percorrer o nosso código por arquivos .ts e gerar os .js dentro do diretório ./dist.
Agora execute o comando tsc -w -diagnostics no seu terminal. Esse comando irá fazer o transpile e passar o diagnostico desse processo. Abaixo você tem uma imagem demonstrando esse passo:
Note que o tempo total foi 1.68s.
Agora atualize o arquivo tsconfig.json com o trecho de código abaixo e execute o mesmo comando do passo anterior novamente: tsc -w -diagnostics
Resultado:
O tempo total para executar esse passo foi de 0.29s, um tempo melhor que o do passo anterior.
Agora vem aquela pergunta, como que o compilador conseguiu melhorar esse tempo?
Ao adicionar a flag incremental = true no arquivo tsconfig.json, ele irá gerar um novo arquivo na nossa estrutura chamado tsconfig.tsbuildinfo, onde ele irá armazenar as informações do ultimo transpile do projeto.
Esse processo ajuda o compilador a ganhar mais velocidade no momento do type-check.
Abaixo você tem as duas imagens geradas nos testes dos passos anteriores, a da direita foi o nosso primeiro teste sem a flah incremental = true e a da esquerda com a flag = true.
A ideia desse artigo era demonstrar uma das novas funcionalidades da nova versão do TypeScript. Espero que tenham gostado e até a próxima pessoal ;)
