O TypeScript 4.0 saiu do forno!

Introdução

Não é novidade para ninguém que o TypeScript vem ganhando cada vez mais espaço. Em julho desse ano, mais de 50 milhões de downloads mensais dessa linguagem foram computados no npm. E, como o Daniel conta nesse artigo, cerca de 89% das pessoas desenvolvedoras que utilizam o TypeScript dizem que irão usar novamente.

Agora, com o anunciamento da versão 4.0, o TypeScript tem causado ainda mais barulho na comunidade de desenvolvimento. No geral, ela nos traz uma maior profundidade na expressividade, produtividade e escalabilidade dos projetos com essa linguagem. Mas apenas dizer isso não basta, vamos nos aprofundar e entender quais as novas features que acompanham essa versão!

Tipos variável das tuplas

Se o título ficou muito confuso não se assuste, aconteceu o mesmo comigo. Esse novo recurso ficará mais claro na prática, mas antes eu gostaria de definir o que é um tupla.

As tuplas representam uma estrutura de dados simples parecida com um Array. A ponto chave para diferenciar os dois é que nos Array’s nós trabalhamos somente com um tipo de dado, enquanto nas tuplas podemos trabalhar com diferentes tipos. Saca só esse exemplo:

let list: Array<number> = [1, 2, 3]; // Array
let list: [string, number, string];  // Tuplas

Caso não tenha ficado claro o suficiente, deixo como recomendação [esse artigo] bem resumido do Thiago Adriano. Agora que você já entendeu o que é uma tupla, irei te mostrar na prática a vantagem dessa feature.

Vamos tentar tipar a função concat com tuplas:

function concat(
    nums: number[],
    strs: string[]
): (string | number)[] {
    return [...nums, ...strs];
}

// acabamos de definir que a função irá receber dois parâmetros, um Array de numbers e outro de strings

let vals = concat([1, 2], ["hi"]);
let val = vals[1]; // infere number | string, apesar de sabermos que é um number

// o TS nos possibilita definirmos tipos específicos para esses valores:

let typedVals = concat([1, 2], ["hi"]) as [number, number, string];
let typedVal = typedVals[1] // infere number, como o esperado

Apesar de ser um código válido, o ideal seria que não perdessemos a tipagem da função concat e não precisássemos declarar os tipos manualmente.

É ai que entra essa nova feature, pois agora podemos fazer isso:

function concat<N extends number[], S extends string[]>(
    nums: [...N],
    strs: [...S]
): [...N, ...S] {
    return [...nums, ...strs];
}

let vals = concat([1, 2], ["hi"]);
let val = vals[1]; // infere um umber

Ou seja, as tuplas podem adicionar ...N como um placeholder genérico para múltiplos tipos na tupla, e você pode tipar essa tupla como desejar, por exemplo, [string, ...T, boolean, ...U].

Tuplas nomeadas (ou legendadas)

Agora que você já sabe o que é uma tupla, ficará fácil explicar essa nova feature.

Como exemplo, veja esse código:

function getSize(): [number, number];

E agora veja como ele fica mais claro:

function getSize(): [min: number, max: number];

Isso também funciona para argumentos opcionais:

type MyTuple = [a: number, b?: number, ...c: number[]];

Inferência de tipo a uma propriedade a partir do constructor

Essa feature, apesar de muito importante, pode ser entendida com um simples código:

class X {

    private a;

    constructor(param: boolean) {
        if (param) {
            this.a = 123;
        } else {
            this.a = false;
        }
    }

}

Ou seja, o constructor inferiu que o tipo da propriedade será number | boolean!

Operadores de atribuição curto

Basicamente essa feature oferece uma melhora na digitação. Mas como?

O TypeScript, a partir dessa nova versão, implementará um proposta de atribuição lógica para o estágio 3 do JS, suportando a nova sintaxe e compilando-a de volta para torná-la utilizável em ambientes mais antigos.

a ||= b
// é o mesmo que: a = a || b

a &&= b
// é o mesmo que: a = a && b

a ??= b
// é o mesmo que: a = a ?? b

Fala sério, isso melhorará muito o visual do nosso código!

Auto-imports mais inteligentes

O Auto-import é uma feature que já existe no TypeScript, e já facilita muito o desenvolvimento, mas que nem sempre funciona. Segundo o Daniel, da Microsoft, um problema específico que a empresa ouviu dos usuários foi que as importações automáticas não funcionavam para dependências escritas em TypeScript.

O TypeScript 4.0 agora opera no seu editor para incluir os pacotes que você listou nas dependências do seu package.json. As informações desses pacotes são usadas apenas para melhorar as importações automáticas e não alteram nada no seu desenvolvimento.

Converter para encadeamento opcional (Optional Chaining)

O encadeamento opcional é outra feature que já existe no TypeScript e é muito bem vista pela comunidade, por isso decidiram trazer uma nova refatoração para converter padrões comuns aproveitando as vantagens do encadeamento opcional e da coalescência nula!

Para simplificar veja esse gif, que retirei do anúncio oficial da nova versão da linguagem:

Site

Para fechar com chave de ouro, a equipe por trás do TypeScript fez uma atualização incrível do seu site. Tornando-o muito mais agradável visualmente e facilitando a leitura da documentação.

Clica aqui e confere lá o resultado!

Conclusão

É super empolgante poder acompanhar de perto essas features incríveis que estão chegando ao TypeScript. Neste post eu trouxe as mudanças que mais me interessaram, mas você pode conferir todas elas clicando aqui.

Vale lembrar que a versão atual é a beta, então possivelmente surgirão mudanças e correções de bugs. Caso queira instalar essa versão basta rodar:

npm i -D typescript@beta
yarn add -D typescript@beta

Sugestões, dúvidas ou críticas, deixem aqui nos comentários!