TypeScript Academy · Ders

Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme

Güvenli türler döndüren türlendirilmiş bir fetch yardımcısı yazın

1. ders / 413 adım

Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

HTTP API'lerini güvenli bir şekilde kullanmak için türlü fetch yardımcı işlevleri yazın.

fetch Sorunu

fetch API'si Promise döndürür ve .json() Promise döndürür. Türler olmadan tüm güvenliği kaybedersiniz.

const res = await fetch('/api/user');
const data = await res.json(); // data: any — unsafe

Genel fetch Sarmalayıcısı

Yanıt biçimini varsayan türlü bir fetch yardımcısı oluşturun.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
  return res.json() as Promise<T>;
}

Sarmalayıcıyı Kullanma

Sarmalayıcıyı açık bir tür bağımsız değişkeniyle çağırın.

interface User { id: number; name: string; }
const user = await fetchJson<User>('/api/users/1');
console.log(user.name); // typed as string

Hata İşleme Ekleme

Result türü döndürecek şekilde sarmalayıcıyı genişletin.

async function safeFetch<T>(url: string): Promise<Result<T>> {
  try {
    const res = await fetch(url);
    if (!res.ok) return err(new Error(`HTTP ${res.status}`));
    return ok(await res.json() as T);
  } catch (e) { return err(e as Error); }
}

İstek Seçeneklerinin Türlendirilmesi

POST/PUT istekleri için fetch seçeneklerine tür verin.

async function postJson<T, B>(url: string, body: B): Promise<T> {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  return res.json() as Promise<T>;
}

Yanıt Doğrulama

Türlü değer olarak döndürmeden önce yanıt biçimini doğrulayın.

AbortController Türlendirmesi

İptal edilebilir isteklere yönelik AbortController ve AbortSignal türlerini belirtin.

const ctrl = new AbortController();
const data = await fetchJson<User>('/api/users/1', { signal: ctrl.signal });
setTimeout(() => ctrl.abort(), 5000);

Temel URL Araya Giricisi

Temel URL'ye sahip bir HTTP istemci sınıfı oluşturun.

class ApiClient {
  constructor(private baseUrl: string) {}
  get<T>(path: string): Promise<T> {
    return fetchJson<T>(`${this.baseUrl}${path}`);
  }
}

Türlü Üst Bilgiler

İstek ve yanıt üst bilgilerine tür verin.

const headers: Record<string, string> = {
  Authorization: `Bearer ${token}`,
  'Content-Type': 'application/json',
};

Sayfalama Türleri

Sayfalı API yanıtlarına tür verin.

interface Paginated<T> { data: T[]; page: number; total: number; }
const result = await fetchJson<Paginated<User>>('/api/users?page=1');

Hızlı Kontrol

Türlü bir fetch sarmalayıcısında `res.json() as Promise` ne yapar?

İnteraktif derste cevapla

Özet

Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme: Temel kavram ve desenlerde uzmanlaştınız.

Başlamak ücretsiz

Yapay zeka eğitmeniyle TypeScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 101
Dersler: 352

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme” dersi ücretsiz mi?

Evet — “Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme” dersinde ne öğreneceğim?

Güvenli türler döndüren türlendirilmiş bir fetch yardımcısı yazın TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Genel Sarmalayıcılarla Fetch Yanıtlarını Türlendirme
Zod ile Çalışma Zamanında Doğrulama
OpenAPI Kod Üretimi: Otomatik Oluşturulan Türler
Tür Güvenli tRPC İstemcisine Genel Bakış

← TypeScript Academy Sayfasına Dön