🥣 👩🏽‍🤝‍👨🏾 🔞 Novos recursos TypeScript para usabilidade aprimorada 🙃 🗑️ 🛸

O TypeScript, em muitos aspectos, não é mais uma linguagem de programação, mas uma ferramenta poderosa para aprender e documentar códigos que ajudam a escrever melhores programas JavaScript.

Um dos pontos mais notáveis do TypeScript é o suporte a alguns dos recursos mais recentes descritos na especificação ECMAScript. Quando um desenvolvedor atualiza para uma nova versão do TypeScript, isso significa que ele tem novos recursos de JavaScript. Além disso, o uso desses recursos não significa possíveis problemas de compatibilidade. O TypeScript, além de apresentar os recursos mais recentes do JavaScript, também é notável pelo fato de os criadores da linguagem estarem constantemente apresentando algo novo à comunidade de programadores do TS, projetada para aumentar a usabilidade. Isso inclui, por exemplo, ferramentas auxiliares para refatoração de código, ferramentas para renomear entidades e para encontrar lugares onde elas são usadas em programas.

O material, cuja tradução publicamos hoje, discutirá alguns novos recursos interessantes do TypeScript. Para uma lista completa das inovações do TypeScript, dê uma olhada aqui .

Objetos e matrizes imutáveis

Para criar matrizes imutáveis usadas na forma de variáveis comuns e parâmetros de função durante a compilação, no TypeScript, você pode usar os tipos auxiliares Readonlye ReadonlyArray. No entanto, seu uso pode causar uma sensação de heterogeneidade na anotação de tipo, especialmente ao declarar matrizes usando caracteres []após especificar um tipo. O TypeScript 3.4 apresenta uma nova maneira de rotular parâmetros que são matrizes somente leitura. Imediatamente apareceu uma nova maneira de declarar variáveis que deveriam ser imutáveis.

Melhorando a usabilidade com parâmetros somente leitura

Ao declarar os parâmetros das funções com as quais você precisa trabalhar como matrizes somente leitura, agora você pode usar a palavra-chave readonly. No exemplo a seguir, as assinaturas dos dois métodos são idênticas:

function foo(s: ReadonlyArray<string>) { /* ... */ }
 
function foo(s: readonly string[]) { /* ... */ }

Nos dois casos, qualquer tentativa de modificar a matriz (por exemplo, usando seu método push) resultará em um erro. Essa inovação elimina a necessidade de um tipo genérico auxiliar, o que significa que o código é mais fácil de ler. Os tipos de objetos também podem ser rotulados como entidades somente leitura, mas ainda precisam de um tipo auxiliar Readonly.

Melhorando a usabilidade de variáveis imutáveis usando a construção as const

O tipo de uma variável declarada usando uma palavra-chave constnão pode ser alterada. Este conceito existe em JavaScript. É adotado no TypeScript para organizar um trabalho mais rigoroso com os tipos. Porém, ao trabalhar com tipos de dados de objetos, como objetos ou matrizes, essas estruturas não são realmente imutáveis. Usar uma palavra-chave constsignifica que uma instância específica de um objeto ou matriz permanecerá inalterada ao trabalhar com uma constante; no entanto, o conteúdo desse objeto ou matriz poderá ser facilmente alterado. Por exemplo, sem violar as regras para trabalhar com entidades const, você pode adicionar novos valores à matriz usando o método push, pode alterar os valores das propriedades dos objetos.

Usando ReadonlyeReadonlyArrayvocê pode dizer ao TypeScript que o sistema deve tratar entidades como se fossem realmente imutáveis. Isso significa que sempre que for feita uma tentativa no código para alterar essa entidade, uma mensagem de erro será emitida.

interface Person { 
  name: string; 
}
 
const person = { 
  name: 'Will' 
} as Readonly<Person>;
person.name = 'Diana'; // !

No TypeScript 3.4, entre outras inovações, o conceito de const assertion (declaração constante), que fornece o uso de uma construção, apareceu as const. Este é um método simplificado para declarar constantes contendo objetos e matrizes imutáveis. Essas declarações são criadas adicionando as constuma constante ao final da declaração. Este método tem uma vantagem adicional, o que é que quando você usá-lo, você não precisa especificar explicitamente o tipo na declaração as const.

const person = { 
        name: 'Will' 
} as const;
 
person.name = 'Diana'; // !
 
//      as const
const array = [1, 2, 3] as const; 
array.push(4); // !

Tipo auxiliar Omitir

Existem vários tipos auxiliares no TypeScript que facilitam o mapeamento de tipos existentes para novos ou definem condicionalmente um tipo com base em outros tipos.

O tipo auxiliar Partialpermite marcar todas as propriedades do objeto como opcional. Antes do lançamento do TypeScript 3.5, como se viu, eu constantemente usava um mecanismo interessante em meus projetos. É o mesmo que o uso do tipo auxiliar agora permite Omit. Esse tipo, como o próprio nome indica, permite excluir algo de outros tipos. Omitaceita o tipo e a combinação de chaves e, em seguida, retorna um novo tipo do qual as propriedades descritas pelas chaves são excluídas. Longe vão os dias em que eu tive que usá- Picklo Excludepara a implementação independente da funcionalidadeOmit.

//     TypeScript 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
interface A { 
    propA?: string; 
    propB?: string; 
    propC?: string; 
}
 
type B = Omit<A, 'propA' | 'propC'>; 
const b: B = { propA: 'hi' }; // ;

Novos recursos de JavaScript suportados pelo TypeScript

Quando as sugestões para novos recursos JavaScript atingem quatro estágios de coordenação, elas são consideradas parte da próxima versão do idioma. É verdade que isso não significa que esses recursos possam ser usados imediatamente em JavaScript, pois seu suporte deve ser implementado em ambientes apropriados. O aplicativo deve ter acesso a essas oportunidades onde quer que sua operação normal seja suposta.

O suporte para novos recursos JavaScript é adicionado regularmente ao compilador TypeScript. Normalmente, o código que implementa esses recursos podem ser convertidos em código JavaScript que é compatível com todos os navegadores que suportam a meta de construção do projeto especificado no tsconfig.json.

▍ Verifique se há nulos e indefinidos

Os desenvolvedores de JavaScript estão familiarizados com o conceito de verdade e falsidade. Ao verificar a verdade pode ser identificado 6 valores, que são sempre falsa: 0, null, undefined, «», NaN, e, claro, false. Na maioria das vezes, o desenvolvedor precisa descobrir se o valor é verdadeiro ou falso, mas, em alguns casos, você só precisa descobrir se o valor que está sendo investigado é um valor real nullou undefined. Por exemplo, no caso, se for necessário distinguir entre código 0e undefined:

//  ||     ,  index  0
const getValueOrOne = (x?: number) => index || 1; 
getValueOrOne(0); // 1 <--

Este código funcionará definindo xo valor gravado em index, em todos os casos, exceto aqueles em que o valor indexé igual 0. Para que esse código funcione corretamente em qualquer situação, ele precisa ser reescrito usando um esquema de teste mais complexo para descobrir o tipo real de valor.

//   ,    
const getValueOrOne = (x?: number) => index !== null && index !== undefined ? : 1; 
getValueOrOne(0); // 0

Agora o código funciona, mas requer o uso de verificações mais complexas. O novo operador para verificar o valor nulle undefined(parece dois pontos de interrogação - ??) simplifica essas verificações retornando o valor localizado na parte esquerda, se não for igual a nulle undefined. Caso contrário, ele retorna o que está do lado direito.

// !
const getValueOrOne = (x?: number) => index ?? 1; 
getValueOrOne(0); // 0
getValueOrOne(2); // 2
getValueOrOne(); // 1

▍ Sequências opcionais

Outro novo recurso JavaScript disponível no TypeScript 3.7 é o operador para organizar sequências opcionais ( ?.). Conheci esse operador pela primeira vez na linguagem de programação Groovy. Desde então, eu queria que ele aparecesse em JavaScript também. Esse operador permite organizar o acesso às propriedades incorporadas dos objetos sem a necessidade de verificação constante de sua existência. Se, ao acessar uma propriedade, esse operador encontrar um valor undefined, ele simplesmente retornará esse valor sem gerar um erro TypeError.

//    
const value = foo && foo.bar && foo.bar.baz;
 
//    
const value = foo?.bar?.baz;

O operador de sequência opcional combinado com o operador de verificar os valores nulle undefinedfornece ao desenvolvedor ainda mais possibilidades, permitindo, por exemplo, gravar na variável o valor de alguma propriedade aninhada do objeto ou, se essa propriedade não existir, algum valor padrão. Aqui está o que parece:

const value = foo?.bar?.baz ?? 'default value';

Fields Campos de classe privada

O TypeScript, desde o advento dessa linguagem, tem seu próprio conceito de campos de classe privada declarados com um modificador de acesso private. Esse conceito apareceu no TypeScript antes mesmo de as classes serem descritas no padrão ECMAScript. Mas no TypeScript, esse conceito se refere aos mecanismos que funcionam durante a compilação de código. O compilador lançará um erro se o campo privado da classe não for acessado por seus próprios métodos. Agora, em JavaScript, há uma oportunidade de declarar propriedades e métodos privados de uma classe. Mas esse recurso é semanticamente e sintaticamente diferente do que ainda existia no TypeScript.

Os campos particulares em JavaScript não são declarados usando um modificador de acesso private. Em vez disso, eles são declarados colocando um símbolo no início de seus nomes #.

class Fan { 
    #on = false; 
    private name = 'fan';
 
    turnOn() { 
        this.#on = true; 
    }
   isTurnedOn() { 
        return this.#on; 
    }
}
 
const fan = new Fan(); 
fan.isTurnedOn(); // false  
fan.turnOn(); 
fan.isTurnedOn(); // true
 
fan.on; //  
fan.#on; // 
fan.name; //   ,    JS

O JavaScript agora suporta campos particulares, a proposta de métodos privados está no terceiro estágio de aprovação. Atualmente, o modificador privatee o caractere #no nome do campo não podem ser usados juntos. Ambas as abordagens podem ser úteis durante o desenvolvimento, e qual escolher depende do programador. Aqui está um podcast que discute a nova sintaxe para declarar campos particulares.

SingUsando a palavra-chave wait no nível superior do código

Mecanismos de programação assíncrona expandem muito os recursos de JavaScript e TypeScript. No início, promessas apareceram nessa área, então - um design async/awaitque permite escrever código assíncrono mais limpo.

Um dos casos em que as promessas são usadas, e não, async/awaité uma chamada de método assíncrona fora da função assíncrona. Por exemplo, no nível superior do módulo ou código do aplicativo. Como solução alternativa nessa situação, você pode propor a criação de uma expressão de função chamada assíncrona imediatamente (IIFE, expressão de função chamada imediatamente) e a execução de código assíncrono dentro dessa expressão.

(async () => { 
    const response = await fetch('https://api.github.com/users/sitepen'); 
    const data = await response.json(); 
    console.log(`Check out the blog at ${data.blog}`); 
})();

O TypeScript agora suporta a capacidade do JavaScript de usar palavras await- chave no nível superior do código. Isso significa que wait pode ser usado fora das funções declaradas com a palavra-chave async. Isso é muito bom para escrever código compacto e claro. É verdade que as expressões awaitno nível superior do código são criticadas pelo fato de poderem retardar o carregamento dos módulos e criar uma situação em que um determinado módulo pode retardar o carregamento de todo o aplicativo, já que o sistema precisa aguardar a conclusão da operação assíncrona e executar todo o código do módulo.

const response = await fetch('https://api.github.com/users/sitepen'); 
const data = await response.json();
 
export default { ...data };

Ambiente aprimorado de experimentação TypeScript

Isso não pode ser chamado de um novo recurso TypeScript, mas, como estamos falando do TypeScript como uma ferramenta, o TypeScript Playground pode ser chamado de uma ferramenta eficaz para verificar rapidamente qualquer construção TypeScript e exibir o código JavaScript no qual essas construções se transformam. A maioria dos exemplos aqui é testada especificamente no TypeScript Playground. Agora, esse ambiente suporta a capacidade de selecionar uma versão específica do TypeScript (incluindo suporte para versões beta). Inclui vários exemplos que ajudarão os iniciantes a começar com o TypeScript.

Sumário

O TypeScript é uma ferramenta que ajuda a escrever um código JavaScript melhor e mais expressivo. As ferramentas auxiliares do TypeScript facilitam a resolução de tarefas complexas, como refatoração e renomeação de entidades, que são muito mais complicadas no JavaScript comum. O TypeScript está constantemente introduzindo novos mecanismos, como Omite as const. Na linguagem, observa-se uma melhoria contínua no suporte de tipos complexos. O TypeScript implementa rapidamente os recursos mais recentes do JavaScript. É por isso que muitas pessoas escolhem o TypeScript, percebendo-o como uma ferramenta, linguagem e ecossistema.

Queridos leitores! Quais novos recursos TypeScript você acha mais interessantes?

Novos recursos TypeScript para usabilidade aprimorada