Como uma linguagem de programação que está ganhando popularidade entre os desenvolvedores, o TypeScript continua a evoluir, trazendo consigo uma série de melhorias e novos recursos. Neste artigo, vamos nos aprofundar na última iteração do TypeScript, a versão 5.0, e explorar suas atualizações mais notáveis.
1. Decorador
O TypeScript 5.0 apresenta um sistema decorador aprimorado com verificação de tipo e geração de metadados aprimoradas. Os decoradores agora trabalham de forma mais integrada com o sistema de tipos, permitindo que você escreva um código mais limpo e robusto. Aqui está um exemplo simples de como os decoradores de método funcionam:
function log<This, Args extends any[], Return>(
target: (this: This, ...args: Args) => Return,
context: ClassMethodDecoratorContext<
This,
(this: This, ...args: Args) => Return
>
) {
const methodName = String(context.name);
function replacementMethod(this: This, ...args: Args): Return {
console.log(`LOG: Entering method '${
methodName}'.`);
const result = target.call(this, ...args);
console.log(`LOG: Exiting method '${
methodName}'.`);
return result;
}
return replacementMethod;
}
class Calculator {
@log
add(a: number, b: number): number {
return a + b;
}
}
const calculator = new Calculator();
console.log(calculator.add(2, 3));
// "LOG: Entering method 'add'."
// "LOG: Exiting method 'add'."
// 5
Neste exemplo, o decorador @log registra o nome do método toda vez que o método é chamado. Além dos decoradores de método, o TypeScript 5.0 oferece suporte a decoradores de acessador automático, decoradores getter e setter e muito mais.
2. parâmetro de tipo const
Antes do TypeScript 5.0, sua inferência geralmente escolhia um tipo mais geral, por exemplo, infer ["Alice", "Bob", "Eve"] como string[], se você quiser um tipo mais específico, adicione como const:
// string[]
const a = ["Alice", "Bob", "Eve"]
// readonly ["Alice", "Bob", "Eve"]
const b = ["Alice", "Bob", "Eve"] as const
O TypeScript 5.0 permite que você adicione o modificador const para digitar declarações de parâmetro:
declare function fnGood<const T extends readonly string[]>(args: T): void;
// T is readonly ["a", "b", "c"]
fnGood(["a", "b" ,"c"]);
Mas lembre-se de que o modificador const afeta apenas a inferência de objetos, matrizes e expressões primitivas escritas na chamada, portanto, os parâmetros que não serão (ou não podem) ser modificados com const não verão nenhuma alteração no comportamento :
declare function fnGood<const T extends readonly string[]>(args: T): void;
const arr = ["a", "b" ,"c"];
// 'T' is still 'string[]'-- the 'const' modifier has no effect here
fnGood(arr);
3. estende suporta vários arquivos de configuração
O TypeScript 5.0 oferece a capacidade de estender vários arquivos de configuração em tsconfig.json. Esse recurso facilita o compartilhamento e o gerenciamento de configurações entre projetos. Aqui está um exemplo de como usar vários perfis:
{
"extends": ["./config/base", "./config/jest"],
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"strict": true
}
}
Neste exemplo, os arquivos de configuração estendem as configurações base e jest, permitindo que você combine e substitua as configurações conforme necessário.
4. Todas as enumerações são enumerações de união
No TypeScript 5.0, todas as enumerações agora são tratadas como enumerações de união. Union enums fornecem melhor segurança de tipo e melhor ergonomia para trabalhar com valores de enum. Aqui está um exemplo:
enum E {
A = 10 * 10, // Numeric literal enum member
B = 'foo', // String literal enum member
C = Math.random(), // Opaque computed enum member
}
function getStringValue(e: E): string {
return String(e);
}
const val = getStringValue(E.A); // "100"
O TypeScript 5.0 consegue transformar todos os enums em union enums criando um tipo exclusivo para cada membro computado. Isso significa que todas as enumerações agora podem ser reduzidas e ter seus membros referenciados como tipos também.
5. — empacotador de resolução de módulo
O TypeScript 5.0 apresenta uma nova estratégia de resolução de módulo chamada bundler. Essa estratégia foi projetada para ser usada com empacotadores como Webpack e Rollup, permitindo um processo de compilação mais eficiente e simplificado (assim como qualquer importação relativa em um módulo Node.js no passado, a extensão do arquivo precisa ser incluída).
Para habilitar a estratégia de resolução do módulo bundler, use a seguinte configuração em tsconfig.json:
{
"compilerOptions": {
"moduleResolution": "bundler"
}
}
6. Logotipo de resolução personalizada
O TypeScript 5.0 adiciona vários novos sinalizadores para personalizar o processo de resolução do módulo. Esses sinalizadores fornecem um controle mais preciso sobre como os módulos são resolvidos, permitindo que você ajuste o processo de construção.
Aqui está uma breve visão geral:
--allowImportingTsExtensions: permite a importação de arquivos TypeScript com extensões específicas do TypeScript, como .ts, .mts ou .tsx.
--resolvePackageJsonExports: força o TypeScript a procurar o campo de exportação do arquivo package.json ao ler pacotes de node_modules.
--resolvePackageJsonImports: força o TypeScript a procurar o campo de importação do arquivo package.json ao fazer uma pesquisa começando com #.
--allowArbitraryExtensions: permite a importação de arquivos com extensões desconhecidas procurando por arquivos de declaração no formato {file basename}.d.{extension}.ts.
--customConditions: obtenha uma lista de condições adicionais a serem consideradas quando o TypeScript resolver de campos exportados ou importados de package.json.
7. — verbatimModuleSyntax
O novo sinalizador --verbatimModuleSyntax no TypeScript 5.0 permite preservar a sintaxe do módulo original ao emitir código JavaScript. Esse recurso é especialmente útil ao usar bundlers, pois não requer transformações adicionais. Por exemplo:
// Erased away entirely.
import type {
A } from "a";
// Rewritten to 'import { b } from "bcd";'
import {
b, type c, type d } from "bcd";
// Rewritten to 'import {} from "xyz";'
import {
type xyz } from "xyz";
Para habilitar esse sinalizador, adicione isso ao seu tsconfig.json:
{
"compilerOptions": {
"verbatimModuleSyntax": true
}
}
8. Suporta tipo de exportação *
O TypeScript 5.0 introduziu suporte para a sintaxe de tipo de exportação *, que permite reexportar todos os tipos de outro módulo.
Essa sintaxe é particularmente útil para criar módulos somente de tipos ou para agregar tipos de várias fontes.
Aqui está um exemplo:
// types.ts
export type {
Foo } from './foo';
export type {
Bar } from './bar';
// index.ts
export type * from './types';
// Also support
export type * as Types from './types';
Neste exemplo, todos os tipos no módulo types.ts são reexportados para o módulo index.ts usando a sintaxe de tipo de exportação *.
9. Suporte @satisfies em JSDoc
A nova tag @satisfies JSDoc no TypeScript 5.0 permite que você especifique que uma implementação de função satisfaz uma interface específica. Esse recurso é especialmente útil ao usar tipos struct ou código JavaScript de verificação de tipo com TypeScript.
Aqui está um exemplo:
// interface Greeter {
// greet(name: string): number;
// }
/**
* @typedef {Function} Greeter
* @param {string} name
* @returns {string}
*/
/**
* @satisfies {Greeter}
*/
function greeter(name: string) {
return `Hello, ${
name}!`;
}
Neste exemplo, a função de saudação é marcada com a tag JSDoc @satisfies, indicando que ela satisfaz a interface Greeter.
10. Suporte @overload em JSDoc
O TypeScript 5.0 adicionou suporte para a tag @overload JSDoc, permitindo que você defina várias assinaturas de função para uma única implementação no código JavaScript.
Esse recurso é especialmente útil ao lidar com funções complexas que precisam oferecer suporte a vários tipos ou formas de argumento.
Aqui está um exemplo:
/**
* @overload
* @param {string} a
* @param {string} b
* @return {string}
*/
/**
* @overload
* @param {number} a
* @param {number} b
* @return {number}
*/
/**
* @param {string | number} a
* @param {string | number} b
*/
export function add(a, b) {
if (typeof a === 'number' && typeof b === 'number') {
return a + b;
} else if (typeof a === 'string' && typeof b === 'string') {
return a.concat(b);
}
}
const numResult = add(1, 2); // 3
const strResult = add('hello', 'world'); // "helloworld"
const errResult = add('hello', 123); // Error: No overload matches this call.
Neste exemplo, a função add é marcada com duas marcas @overload JSDoc, especificando que ela pode lidar com números e strings como parâmetros.
11. Passe sinalizadores específicos do lançamento em --build
O TypeScript 5.0 introduziu a capacidade de passar sinalizadores específicos de emissão ao usar o sinalizador --build. Esse recurso permite que você ajuste a saída do seu projeto à medida que o constrói, dando a você mais controle sobre o processo de construção. Parte da mensagem:
--declaration: gera arquivos .d.ts a partir dos arquivos TypeScript e JavaScript no projeto.
–emitDeclarationOnly: Somente arquivos d.ts de saída, não arquivos JavaScript.
--declarationMap: Cria mapas de origem para arquivos d.ts.
--sourceMap: cria arquivos de mapa de origem para arquivos JavaScript emitidos.
--inlineSourceMap: inclui arquivos de mapa de origem no JavaScript emitido.
12. Classificação de importação sem distinção entre maiúsculas e minúsculas no editor
O TypeScript 5.0 melhora a classificação de importação no editor com distinção entre maiúsculas e minúsculas. Essa alteração resulta em uma ordem de classificação mais natural e intuitiva ao organizar as importações, resultando em um código mais limpo e legível.
13. Acabamento detalhado do interruptor/caixa
O TypeScript 5.0 aprimora a experiência de conclusão de código, fornecendo conclusão exaustiva de alternância/caso. Ao lidar com tipos de união, o editor agora pode sugerir todos os casos possíveis, reduzindo a chance de casos perdidos e tornando mais fácil escrever instruções switch abrangentes. Aqui está um exemplo:
type Animal = "cat" | "dog" | "fish";
function speak(animal: Animal): string {
switch (animal) {
// TypeScript 5.0 will suggest all possible cases: "cat", "dog", "fish"
}
}
14. Otimização de velocidade, memória e tamanho do pacote
O TypeScript 5.0 traz várias otimizações de desempenho, incluindo verificação de tipo mais rápida, menos uso de memória e tamanhos de pacote menores. Essas melhorias tornam o trabalho com TypeScript ainda mais agradável, garantindo uma experiência de desenvolvimento suave e eficiente.
15. Mudanças recentes e depreciações
Como qualquer versão principal, o TypeScript 5.0 apresenta algumas alterações e reprovações importantes. É fundamental revisar as notas de versão e testar seu projeto completamente antes de atualizar.
Algumas mudanças importantes notáveis incluem:
Requisitos de tempo de execução: o TypeScript agora tem como alvo o ECMAScript 2018. O pacote TypeScript também define um mecanismo mínimo esperado de 12.20. Para usuários do Node, isso significa que o requisito de versão mínima do TypeScript 5.0 é pelo menos Node.js 12.20 e superior.
Alteração de lib.d.ts: alterar como os tipos de DOM são gerados pode ter um impacto no código existente. Vale a pena observar que algumas propriedades foram convertidas de tipos numéricos em literais numéricos, e as propriedades e métodos para manipulação de eventos recortar, copiar e colar foram movidos na interface.
Alteração de quebra de API: mudou para módulos, removeu algumas interfaces desnecessárias e fez algumas melhorias de correção.
Casts implícitos proibidos em operadores relacionais:
function func1(ns: number | string) {
return ns * 4; // Error, possible implicit coercion
}
function func2(ns: number | string) {
return ns > 4; // Error, possible implicit coercion
}
function func3(ns: number | string) {
return +ns > 4; // OK
}
Revisão de Enum: No TypeScript 5.0, você não verá esses problemas estranhos de enum, aqui estão duas importantes melhorias de bug:
// Part1: Assigning an out-of-domain literal to an enum type
// now errors out as one would expect.
enum SomeEvenDigit {
Zero = 0,
Two = 2,
Four = 4,
}
// Now correctly an error
let m: SomeEvenDigit = 1;
// Part2: Enums declaring values with mixed numeric and
// indirect string enum references incorrectly create an all-numeric enum.
enum Letters {
A = 'a',
}
enum Numbers {
one = 1,
two = Letters.A,
}
// Now correctly an error
const t: number = Numbers.two;
Verificação de tipo mais precisa para decoradores de parâmetros em construtores — experimentalDecorators
algumas configurações obsoletas e valores de configuração.
Em suma, o TypeScript 5.0 traz muitos novos recursos, então qual recurso você acha mais útil? Você pode falar sobre suas opiniões na área de comentários.