0Pricing
React Academy · Ders

Genel Bileşenler ve Yardımcı Türler

Yeniden kullanılabilir genel bileşenler yazın ve PropsWithChildren, ComponentProps ve Omit kullanın.

Genel Bileşenler ve Yardımcı Türler, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Genel tür kullanan bileşenler neden kullanılır?

Genel tür kullanan bileşenler, tam tür güvenliğini korurken farklı veri türlerine uyum sağlar; her veri yapısıyla çalışabilen türlendirilmiş bir liste, seçim alanı veya tablo sunar.

Basit bir genel tür listesi

Her öğe türünü oluşturan bir liste bileşeni yapmak için işlev üzerinde T tür parametresini kullanın.

interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
  keyExtractor: (item: T) => string;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={keyExtractor(item)}>{renderItem(item, i)}</li>
      ))}
    </ul>
  );
}

Genel türleri kısıtlama

TypeScript'in türün hangi özelliklere sahip olması gerektiğini bilmesi için kısıtlar eklemek üzere extends kullanın.

interface SelectProps<T extends { id: string; label: string }> {
  options: T[];
  value: T | null;
  onChange: (option: T) => void;
}

function Select<T extends { id: string; label: string }>(
  { options, value, onChange }: SelectProps<T>
) {
  return (
    <select value={value?.id} onChange={e => onChange(options.find(o => o.id === e.target.value)!)}>
      {options.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
    </select>
  );
}

PropsWithChildren

React.PropsWithChildren<P>, herhangi bir özellik türüne children?: React.ReactNode ekler; bu, sarmalayıcı bileşenler için kullanışlıdır.

function Card({ title, children }: React.PropsWithChildren<{ title: string }>) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

ComponentProps

React.ComponentProps<typeof Component>, mevcut bir bileşenin özelliklerini çıkarır; bileşeni genişletmek veya sarmalamak istediğinizde kullanışlıdır.

import { Button } from './Button';

type ExtendedButtonProps = React.ComponentProps<typeof Button> & {
  loading?: boolean;
};

function LoadingButton({ loading, children, ...props }: ExtendedButtonProps) {
  return (
    <Button {...props} disabled={loading || props.disabled}>
      {loading ? <Spinner /> : children}
    </Button>
  );
}

ComponentPropsWithoutRef

React.ComponentPropsWithoutRef<'input'>, HTML öğesi özelliklerini ref özelliği olmadan çıkarır; HTML öğelerini sarmalamak için idealdir.

type InputProps = React.ComponentPropsWithoutRef<'input'> & {
  label: string;
  error?: string;
};

function FormInput({ label, error, ...inputProps }: InputProps) {
  return (
    <div>
      <label>{label}</label>
      <input {...inputProps} />
      {error && <span className="error">{error}</span>}
    </div>
  );
}

Özellikleri çıkarma ve seçme

Belirli özellikleri kaldırmak için Omit<T, Keys>, mevcut bir türden yalnızca belirli özellikleri korumak için Pick<T, Keys> kullanın.

interface UserCardProps {
  id: string;
  name: string;
  email: string;
  avatar: string;
  role: string;
}

// Only expose non-sensitive fields:
type PublicUserCardProps = Omit<UserCardProps, 'email' | 'role'>;
// Or pick exactly what you need:
type AvatarProps = Pick<UserCardProps, 'name' | 'avatar'>;

Kısmi ve zorunlu özellikler

Partial<T> tüm özellikleri isteğe bağlı yapar (güncelleme formları için kullanışlıdır). Required<T> ise tüm özellikleri zorunlu yapar.

interface UserFormData { name: string; email: string; bio: string; }

// For update: only send changed fields
type UserUpdatePayload = Partial<UserFormData>;

// For create: all fields are mandatory
type UserCreatePayload = Required<UserFormData>;

Türlendirilmiş sözlükler için Record

Record<Keys, Value>, belirli anahtar türlerine sahip bir nesne türü oluşturur; arama eşlemeleri ve çeviriler için kullanışlıdır.

type Status = 'idle' | 'loading' | 'success' | 'error';

const statusLabels: Record<Status, string> = {
  idle: 'Ready',
  loading: 'Loading...',
  success: 'Done!',
  error: 'Something went wrong',
};

Kanca türleri için ReturnType

Türü elle yinelemeden özel bir kancanın dönüş türünü çıkarmak için ReturnType<typeof useMyHook> kullanın.

function useCounter(initial: number) {
  const [count, setCount] = useState(initial);
  return { count, increment: () => setCount(c => c + 1) };
}

type CounterHook = ReturnType<typeof useCounter>;
// { count: number; increment: () => void }

Genel tür kullanan tablo bileşeni

Her satır yapısıyla çalışan, sütun anahtarlarını çıkaran ve yine de otomatik tamamlama sağlayan, tamamen tür güvenli bir veri tablosu.

interface Column<T> {
  key: keyof T;
  header: string;
  render?: (value: T[keyof T], row: T) => React.ReactNode;
}

function DataTable<T extends object>({ data, columns }: { data: T[]; columns: Column<T>[] }) {
  return (
    <table>
      <thead><tr>{columns.map(c => <th key={String(c.key)}>{c.header}</th>)}</tr></thead>
      <tbody>{data.map((row, i) => (
        <tr key={i}>{columns.map(c => <td key={String(c.key)}>{c.render ? c.render(row[c.key], row) : String(row[c.key])}</td>)}</tr>
      ))}</tbody>
    </table>
  );
}

Hızlı kontrol

Mevcut bir TypeScript arayüzünden belirtilen anahtarları hangi yardımcı tür kaldırır?

Özet

Genel tür kullanan bileşenler, veri yapıları arasında tür güvenliğini korumak için tür parametrelerinden yararlanır. Omit, Pick, Partial, ComponentProps ve PropsWithChildren gibi yardımcı türler, türlerin elle yinelenmesini ortadan kaldırır ve bileşen arayüzlerini daha kolay birleştirilebilir hale getirir.

Sıkça Sorulan Sorular

“Genel Bileşenler ve Yardımcı Türler” dersi ücretsiz mi?

Evet — “Genel Bileşenler ve Yardımcı Türler” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Genel Bileşenler ve Yardımcı Türler” dersinde ne öğreneceğim?

Yeniden kullanılabilir genel bileşenler yazın ve PropsWithChildren, ComponentProps ve Omit kullanın. React 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.

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

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

“Genel Bileşenler ve Yardımcı Türler” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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. Prop'ları ve Bileşen Dönüş Türlerini Türlendirme
  2. TypeScript'te Olayları ve Ref'leri Türlendirme
  3. Genel Bileşenler ve Yardımcı Türler
  4. Context'leri ve Özel Hook'ları Türlendirme
← React Academy Sayfasına Dön