0Pricing
Frontend Academy · Ders

Generic'ler: T extends ve Kısıtlamalar

Generic işlevler ve arayüzler yazın, extends ile tür parametrelerini kısıtlayın ve esnek API'ler için generic varsayılanlarını kullanın.

Generic'ler: T extends ve Kısıtlamalar, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Jenerikler Nedir

Jenerikler, tür güvenliğini koruyarak birden çok türle çalışabilen işlevler, sınıflar ve arabirimler yazmanızı sağlar. Her tür için ayrı işlevler yazmak yerine, bir tür değişkeniyle parametreleştirilmiş tek bir jenerik işlev yazarsınız.

Basit Bir Jenerik İşlev

T tür parametresi açı parantezleri içinde bildirilir. TypeScript, T'yi bağımsız değişkenin türünden çıkarır; çağrı noktasında açık bir ek açıklama gerekmez.

function identity<T>(value: T): T {
  return value;
}

identity(42);      // T is inferred as number, returns number
identity('hello'); // T inferred as string
identity<boolean>(true); // explicit

Jenerik Arabirimler ve Türler

Yeniden kullanılabilir veri yapılarını açıklamak için arabirimleri ve türleri jeneriklerle parametreleştiriniz.

interface Box<T> {
  value: T;
  label?: string;
}

const numBox: Box<number> = { value: 42 };
const strBox: Box<string> = { value: 'hello', label: 'greeting' };

extends — Jenerik Türleri Sınırlama

T'nin alabileceği değerleri sınırlamak için T extends SomeType kullanınız. İşlev yalnızca bu sınırlamayı karşılayan türleri kabul eder.

function getLength<T extends { length: number }>(item: T): number {
  return item.length; // safe: T is guaranteed to have length
}

getLength('hello');       // 5
getLength([1, 2, 3]);    // 3
getLength({ length: 7 }); // 7
// getLength(42);         // Error: number has no length

keyof ve Jenerik Sınırlamalar

keyof T, T'nin özellik anahtarlarının birleşimini üretir. Jeneriklerle birlikte kullanıldığında tür güvenli özellik erişimi sağlar.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'foo'); // Error

Jenerik Varsayılanları

T = DefaultType ile bir jenerik parametre için varsayılan tür sağlayınız. Mantıklı bir varsayılanın bulunduğu, ancak çağıranların bunu geçersiz kılabildiği durumlarda kullanılır.

interface Paginated<T = unknown> {
  items: T[];
  total: number;
  page: number;
}

const rawPage: Paginated = { items: [], total: 0, page: 1 };
const typedPage: Paginated<User> = { items: [], total: 0, page: 1 };

Birden Çok Tür Parametresi

İşlevlerin birden çok bağımsız tür parametresi olabilir.

function zip<A, B>(arrA: A[], arrB: B[]): Array<[A, B]> {
  return arrA.map((a, i) => [a, arrB[i]]);
}

zip([1, 2, 3], ['a', 'b', 'c']);
// [[1,'a'], [2,'b'], [3,'c']]

Jenerik Sınıflar

Sınıflar da jenerik olabilir. Bu, yığınlar, kuyruklar ve gözlemlenebilir depolar gibi veri yapılarında yaygındır.

class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items.at(-1); }
  get size() { return this.items.length; }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop(); // 2

Eşzamansız Jenerik İşlevler

Eşzamansız jenerik işlevler, tür bilgili API çağrılarında yaygın olarak kullanılır.

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

const users = await fetchJson<User[]>('/api/users');
const profile = await fetchJson<UserProfile>('/api/me');

Koşullu Türlerde infer

Koşullu bir tür içindeki infer anahtar sözcüğü, bir desenden tür çıkarır. Bir işlevin dönüş türünü veya bir dizinin öğe türünü çıkarmak için kitaplık kodunda kullanılır.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ElementType<T> = T extends Array<infer E> ? E : never;

type Fn = () => { name: string };
type Result = ReturnType<Fn>; // { name: string }

Jenerikler Ne Zaman Kullanılmalı

Jenerikleri şu durumlarda kullanınız: 1) aynı mantık birden çok türe uygulanıyorsa, 2) girdi ve çıktı türleri arasında bir ilişkiye ihtiyacınız varsa, 3) yeniden kullanılabilir bir veri yapısı veya yardımcı program oluşturuyorsanız. Jenerikleri yalnızca kullanmış olmak için kullanmayınız; tek bir kullanım durumu olduğunda somut türler daha açıktır.

Kısa Kontrol

T extends { length: number } sınırlaması neyi garanti eder?

Özet: Jenerikler

Jenerikler, tek bir işlevin, sınıfın veya arabirimin birden çok türle çalışması için türleri parametreleştirir. T extends SomeType sınırlamalar ekler. keyof T, özellik anahtarlarının birleşimlerini verir. T = Default ile jenerik varsayılanları tanımlanır. infer, koşullu türlerde türleri çıkarır. Jenerikleri yeniden kullanılabilir tür bilgili yardımcı programlar ve veri yapıları için kullanınız.

Sıkça Sorulan Sorular

“Generic'ler: T extends ve Kısıtlamalar” dersi ücretsiz mi?

Evet — “Generic'ler: T extends ve Kısıtlamalar” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Generic'ler: T extends ve Kısıtlamalar” dersinde ne öğreneceğim?

Generic işlevler ve arayüzler yazın, extends ile tür parametrelerini kısıtlayın ve esnek API'ler için generic varsayılanlarını kullanın. Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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.

“Generic'ler: T extends ve Kısıtlamalar” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

  1. Generic'ler: T extends ve Kısıtlamalar
  2. Yardımcı Türler: Partial Required Pick Omit
  3. Eşlenmiş Türler ve Koşullu Türler
  4. Daraltma: typeof instanceof Ayırt Edilmiş Birleşimler
← Frontend Academy Sayfasına Dön