Cara Bekerja dengan TypeScript dan Promises

TypeScript menyempurnakan pengembangan JavaScript dengan menambahkan tipe statis. Saat bekerja dengan kode asinkron, promise digunakan untuk menangani operasi yang selesai di masa mendatang. TypeScript menyediakan alat untuk mengelola promise dengan keamanan dan kejelasan tipe. Panduan ini membahas cara bekerja dengan promise di TypeScript, dari penggunaan dasar hingga skenario lanjutan.

Memahami Janji

promise adalah objek yang mewakili penyelesaian atau kegagalan operasi asinkron. Objek ini menyediakan metode untuk menangani hasil atau kesalahan operasi. Dalam TypeScript, promise dapat diketik untuk memastikan bahwa promise tersebut diselesaikan dengan tipe data yang diharapkan.

Penggunaan Dasar Promise

Membuat dan menggunakan promise di TypeScript mudah saja. Berikut adalah contoh promise yang diselesaikan dengan string:

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);
});

Dalam contoh ini, fetchData mengembalikan promise yang diselesaikan dengan string. Metode then menangani nilai yang diselesaikan, sementara catch menangani kesalahan apa pun.

Menangani Promise dengan Async/Await

TypeScript mendukung sintaks async/await, yang menyediakan cara yang lebih mudah dibaca untuk bekerja dengan promises. Berikut cara menggunakan async/await dengan promises:

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();

Dalam contoh ini, fungsi fetchDataAsync dideklarasikan sebagai async, yang memungkinkannya menggunakan kata kunci await untuk menunggu promise diselesaikan. Kesalahan ditangkap menggunakan blok try/catch.

Mengetik Janji dengan Generik

TypeScript memungkinkan penentuan tipe data yang diselesaikan oleh suatu promise menggunakan generik. Ini memastikan bahwa tipe-tipe tersebut dikelola dengan benar di seluruh kode. Berikut adalah contoh dari promise yang diketik:

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);
});

Dalam contoh ini, fetchUser mengembalikan promise yang diselesaikan dengan objek User. Tipe ditentukan menggunakan generik, yang memastikan keamanan tipe.

Menggunakan Promises di TypeScript dengan Panggilan API

Promise sering digunakan dengan panggilan API untuk menangani pengambilan data asinkron. Sistem tipe TypeScript membantu mengelola respons dari 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);
});

Contoh ini menunjukkan cara menggunakan fetch untuk melakukan panggilan API dan menangani respons menggunakan promises dan async/await. Respons diketik sebagai User, yang memastikan keamanan tipe.

Kesimpulan

Bekerja dengan promises dalam TypeScript memberikan keamanan dan kejelasan tipe yang lebih baik untuk operasi asynchronous. Dengan menggunakan sistem pengetikan TypeScript, sintaks async/await, dan generik, pengembang dapat mengelola promises secara efektif dan membangun aplikasi yang lebih andal.