Programação Assíncrona em TypeScript: Guia Completo na Prática

Programação Assíncrona em TypeScript: Guia Completo na Prática

O desenvolvimento web moderno é impensável sem operações assíncronas: requisições a APIs, trabalho com bancos de dados, leitura de arquivos e temporizadores. TypeScript, como uma extensão do JavaScript, não apenas preserva todas as possibilidades da programação assíncrona, mas também adiciona tipagem estrita, tornando o código mais previsível e seguro. Neste guia, abordaremos os conceitos-chave de assincronicidade em TypeScript — desde Promises básicas até padrões avançados — com exemplos reais de código.

1. Fundamentos: Promise e Tipagem

Promise é um objeto que representa o resultado de uma operação assíncrona, que pode ser concluída com sucesso (fulfilled) ou rejeitada (rejected). TypeScript permite tipar estritamente qual valor a Promise retornará.

// Exemplo de Promise tipadafunction fetchUserData(userId: number): Promise<{ name: string; email: string }> {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (userId > 0) {        resolve({ name: 'João Silva', email: 'joao@example.com' });      } else {        reject(new Error('ID de usuário inválido'));      }    }, 1000);  });}

// UsofetchUserData(1)  .then(user => console.log(user.name)) // João Silva  .catch(error => console.error(error.message));

Observe: Promise<{ name: string; email: string }> garante que no then receberemos um objeto exatamente com esses campos. Isso evita erros relacionados a propriedades indefinidas.

2. Async/Await: Açúcar Sintático com TypeScript

As palavras-chave async e await tornam o código assíncrono semelhante ao síncrono, sem perder desempenho. TypeScript determina automaticamente o tipo de retorno da função async como Promise<T>.

// Função retorna Promise<number>async function getDiscountPrice(price: number, discountPercent: number): Promise<number> {  if (discountPercent < 0 || discountPercent > 100) {    throw new Error('Percentual de desconto inválido');  }  // Simulação de cálculo assíncrono  const discount = await calculateDiscountAsync(price, discountPercent);  return price - discount;}

// Função auxiliarfunction calculateDiscountAsync(price: number, percent: number): Promise<number> {  return Promise.resolve(price * percent / 100);}

// Usoasync function main() {  try {    const finalPrice = await getDiscountPrice(1000, 20);    console.log(`Preço final: ${finalPrice}`); // 800  } catch (error) {    if (error instanceof Error) {      console.error('Erro:', error.message);    }  }}main();

Importante: TypeScript não permite usar await fora de uma função async (exceto no nível superior em módulos com configurações específicas). Sempre envolva as chamadas em uma função async ou use .then().

3. Tratamento de Erros e Padrões Avançados

Um tratamento adequado de erros é a base de um código assíncrono confiável. TypeScript ajuda a capturar erros em tempo de compilação, mas a lógica de tratamento precisa ser escrita manualmente.

3.1. Tratamento de Erros em async/await

async function safeFetchData(url: string): Promise<unknown> {  try {    const response = await fetch(url);    if (!response.ok) {      throw new Error(`Erro HTTP! Status: ${response.status}`);    }    return await response.json();  } catch (error) {    // TypeScript restringe o tipo para Error    if (error instanceof Error) {      console.error('Erro na requisição:', error.message);      // Pode retornar um valor padrão ou propagar o erro adiante      return null;    }    throw error; // Erro desconhecido