TypeScript 3.4: as novidades

Se você não conhece muito o Typescript, pelo menos é provável que já tenha ouvido falar. Com certeza você já se deparou com algum chefe, amigo ou algum conteúdo na internet tratando sobre o assunto.

Resumidamente Typescript é um superset (um superconjunto) de JavaScript desenvolvido pela Microsoft que adiciona tipagem e alguns outros recursos a linguagem. Atualmente está na versão 3.4.

As novidades do TypeScrit 3.4 é o meu tema de hoje. Vem conferir!

>>Leitura Recomendada:
Svelte: o framework JavaScript que não é um framework

As novidades da versão 3.4

A versão 3.4 do Typescript foi lançada na última sexta-feira, dia 29/03. A nova versão trouxe algumas melhorias interessantes. Fiz um review com a listagem dessas melhorias.

Confira aqui:

Flag — incremental – construções subsequentes mais rápidas

Antes de rodar o seu código Typescript é necessário compilar. Uma maneira de fazer isso é rodar o Typescript em modo — watch.

Nesse caso, quando um arquivo sofre alguma mudança o Typescript é capaz de identificar os arquivos que serão afetados e precisam ser recompilados. Isso evita que o seu projeto seja todo recompilado.

Para evitar que todos os usuários mantenham um processo tsc –watch rodando, a versão 3.4 do Typescript trouxe uma nova flag chamada
— incremental.

Com isso o Typescript salva um esquema de informações do projeto da última compilação e na próxima vez que for invocado com –incremental, irá usar essas informações para verificar e compilar as alterações da melhor maneira possível.

Exemplo:

// tsconfig.json
{
    "compilerOptions": { 
        "incremental": true,
        "outDir": "./lib"
    },
    "include": ["./src"]
} 

Quando executamos o comando tsc, o TypeScript busca o arquivo .tsbuildinfo no diretório “/lib” (caso o arquivo não exista, será criado um novo arquivo).

Veja no quadro abaixo a diferença de tempo adicionando o –incremental no tsconfig.json do projeto, utilizando o Visual Studio Code como ferramenta.

>> Leitura recomendada:
React vs Vue vs Angular: qual escolher?

Melhorias para ReadonlyArray e Readonly

O tipo ReadonlyArray descreve as arrays que podem ser apenas lidas. Qualquer variável com uma referência para um ReadonlyArray não pode adicionar, remover ou substituir qualquer elemento do array.

function foo(arr: ReadonlyArray<string>) {
    arr.slice();            // okay
    arr.push("hello!"); // error!
}

A nova versão do TypeScript 3.4 traz uma nova sintaxe para o ReadonlyArray usando um novo modificador readonly para tipos de arrays.

function foo(arr: readonly string[]) {
    arr.slice();             // okay
    arr.push("hello!"); // error!
}

Readonly tuplas

O TypeScript 3.4 também traz um novo suporte para tuplas readonly . Podemos adicionar a qualquer tipo de tupla a palavra-chave readonly para torná-la uma tupla readonly.

Nesse caso como era de se esperar, as tuplas readonly só podem ser lidas.

function foo(pair: readonly [string, string]) {
    console.log(pair[0]);   // okay
    pair[1] = "hello!";       // error
}

Ressalvas

Apesar da semelhança, inclusive com outras linguagens, em TypeScript o modificador readonly só pode ser usado em arrays e tuplas.

let err1: readonly Set<number>;  // error!
let err2: readonly Array<boolean>; // error!

let okay: readonly boolean[];          // works fine 

>>Leitura Recomendada:
Leia nosso artigo sobre o Framework Angular

Variáveis em escopo global com GlobalThis

O TypeScript 3.4 apresenta uma nova maneira de acessar variáveis de escopo global.

Por mais surpreendente que seja, em alguns momentos, em nossas aplicações, o acesso a variáveis globais pode ser bem trabalhoso, principalmente por desenvolvermos aplicações em módulos.

Quem nunca teve problema com uma variável local, “escondendo” uma variável global? Em determinados ambientes é possível acessar objetos globais em browser, por meio do window, self, frame ou ainda usar o this, fora do strict mode.

Ao contrário das soluções acima, o globalThis oferece uma maneira padrão de acessar o escopo global, em diferentes ambientes. Veja o exemplo a seguir:

// arquivo global:

var valor = 100;

// Refere-se a variável 'valor' acima
globalThis.valor = 200; 

Perceba que variáveis declaradas com let e const, não podem ser acessadas com o globalThis:

let valor = 42;
// error! Property 'valor' does not exist on 'typeof globalThis'.globalThis.valor = 333333;

É importante observar que o acesso ao escopo global através do globalThis foi padronizada na última versão do ECMAScript (ES10).

Com isso se você estiver utilizando navegadores antigos que não suportam essa funcionalidade, deve-se utilizar então, um pollyfill apropriado.

Essas foram algumas das melhorias implementadas na nova versão do TypeScript.  

E o lançamento das próximas implementações, já está previsto para o próximo mês de maio.

Caso queira acompanhar os lançamentos e novidades acesse a página de roadmap do Typescript no GitHub.

Valeu e até a próxima!

Marcus Vinnicius

Uma frase? Cabeça vazia, oficina de código! Aproveita todo o tempo livre para programar. Amante de javascript e c#. Entusiasta de qualquer tecnologia que impacte positivamente a vida das pessoas. Gosta de polêmicas e não corre de discussões. E afirma, que, sim, .NET é melhor que JAVA e Mac é melhor que Windows.