Як працювати з 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 дозволяє вказати тип даних, які обіцянка вирішує за допомогою генериків. Це гарантує правильне керування типами в усьому коді. Ось приклад введеної обіцянки:

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. Тип вказується за допомогою генериків, що забезпечує безпеку типу.

Використання Promises у 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 і генерики, розробники можуть ефективно керувати обіцянками та створювати більш надійні програми.