TypeScript'te Awaited Type Kullanımı

Modern JavaScript uygulamaları yoğun şekilde asenkron programlama kullanır.

async function, Promise, API çağrıları ve veri alma işlemleri ile çalışırken gerçek sonuç tipini bilmek gerekir.

TypeScript bunun için yerleşik bir utility type sunar:

Awaited<T>

Bu type Promise değerlerinin çözülen son tipini elde etmeye yardımcı olur.

Problem

Örnek:

async function getUser() {
  return {
    id: 1,
    name: "Hamid",
  };
}

Oluşan tip:

Promise<{
  id: number;
  name: string;
}>

Sadece sonuç objesinin tipini almak için:

type User = Awaited<ReturnType<typeof getUser>>;

kullanabiliriz.

Awaited Nasıl Çalışır?

type A = Awaited<Promise<string>>;

Sonuç:

string

İç İçe Promise Yapıları

Awaited Promise yapılarını tekrar tekrar çözer:

type Result = Awaited<Promise<Promise<string>>>;

Sonuç:

string

API Fonksiyonları ile Awaited Kullanımı

async function fetchProducts() {
  const response = await fetch('/api/products');
 
  return response.json();
}
 
type Products = Awaited<ReturnType<typeof fetchProducts>>;

Bu yaklaşım type'ların fonksiyon ile aynı kalmasını sağlar.

React Server Components ile Awaited

Next.js App Router içinde özellikle kullanışlıdır:

async function getArticles() {
  return fetch('/api/articles')
    .then(res => res.json());
}
 
type Articles = Awaited<ReturnType<typeof getArticles>>;

Awaited ve ReturnType Karşılaştırması

ReturnType Promise döndürür:

type Result = ReturnType<typeof getUser>;

Sonuç:

Promise<User>

Awaited çözülen değeri verir:

type Result = Awaited<ReturnType<typeof getUser>>;

Sonuç:

User

Sonuç

Awaited<T> küçük fakat güçlü bir TypeScript utility type'tır.

Async function, API, Next.js Server Components ve React veri alma işlemlerinde oldukça kullanışlıdır.

Tekrarlayan type tanımları yerine TypeScript son veri yapısını otomatik olarak çıkarabilir.