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?
| Ação | Tempo |
| Compilação sem o –incremental | 47.54s |
| Primeira compilação com o –incremental | 52.77s |
| Compilação seguinte com o –incremental | 11.49s |
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!
