Как работать с TypeScript и Promises

TypeScript улучшает разработку JavaScript, добавляя статические типы. При работе с асинхронным кодом обещания используются для обработки операций, которые завершатся в будущем. TypeScript предоставляет инструменты для управления обещаниями с безопасностью типов и ясностью. В этом руководстве рассматривается работа с обещаниями в TypeScript, от базового использования до сложных сценариев.

Понимание обещаний

promise — это объект, представляющий окончательное завершение или сбой асинхронной операции. Он предоставляет методы для обработки результата или ошибки операции. В TypeScript обещания могут быть типизированы, чтобы гарантировать, что они разрешаются с ожидаемым типом данных.

Основное использование обещаний

Создание и использование обещаний в TypeScript просты. Вот пример обещания, которое разрешается со строкой:

function fetchData(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // Outputs: Data fetched successfully!
}).catch((error) => {
  console.error("Error:", error);
});

В этом примере fetchData возвращает обещание, которое разрешается со строкой. Метод then обрабатывает разрешенное значение, в то время как catch обрабатывает любые ошибки.

Обработка обещаний с помощью Async/Await

TypeScript поддерживает синтаксис async/await, который обеспечивает более читаемый способ работы с обещаниями. Вот как использовать async/await с обещаниями:

async function fetchDataAsync(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Outputs: Data fetched successfully!
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

В этом примере функция fetchDataAsync объявлена ​​как async, что позволяет ей использовать ключевое слово await для ожидания разрешения обещания. Ошибки перехватываются с помощью блока try/catch.

Ввод обещаний с помощью дженериков

TypeScript позволяет указать тип данных, которые обещание разрешает с помощью generics. Это гарантирует, что типы будут правильно управляться во всем коде. Вот пример типизированного обещания:

interface User {
  id: number;
  name: string;
}

function fetchUser(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "John Doe" });
    }, 1000);
  });
}

fetchUser().then((user) => {
  console.log(user.id, user.name); // Outputs: 1 John Doe
}).catch((error) => {
  console.error("Error:", error);
});

В этом примере fetchUser возвращает обещание, которое разрешается с объектом User. Тип указывается с использованием generics, что обеспечивает безопасность типов.

Использование обещаний в TypeScript с вызовами API

Обещания часто используются с вызовами API для обработки асинхронной выборки данных. Система типов TypeScript помогает управлять ответами от API:

async function getUserData(userId: number): Promise {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error("Network response was not ok.");
  }
  const data: User = await response.json();
  return data;
}

getUserData(1).then((user) => {
  console.log(user);
}).catch((error) => {
  console.error("Error:", error);
});

В этом примере показано, как использовать fetch для вызова API и обработки ответа с помощью promises и async/await. Ответ типизирован как User, что обеспечивает безопасность типов.

Заключение

Работа с обещаниями в TypeScript обеспечивает повышенную безопасность типов и ясность для асинхронных операций. Используя систему типизации TypeScript, синтаксис async/await и обобщения, разработчики могут эффективно управлять обещаниями и создавать более надежные приложения.