0Pricing
Frontend Academy · Ders

React ile TypeScript: FC Genel Türleri ve Kancalar

React bileşenlerini genel türde özelliklerle türlendirmeyi, useState ve useRef için açık türler belirtmeyi ve demet döndüren özel kancaları türlendirmeyi öğrenin.

React ile TypeScript: FC Genel Türleri ve Kancalar, CoddyKit'te ücretsiz bir Frontend 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, 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.

Bileşenleri Türlendirme

Modern React'te özellikleri bir arayüzle türlendirin ve sade bir işlev kullanın. React.FC mevcut olsa da artık önerilmez (örtük alt öğeler ve genel tür desteği yoktur).

// Recommended:
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

Alt Öğeleri Türlendirme

Görüntülenebilir tüm alt öğeler için React.ReactNode kullanın.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

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

useState'i Türlendirme

useState genellikle başlangıç değerinden tür çıkarır. Başlangıç değeri null olduğunda veya olası türün tamamını temsil etmediğinde açık bir tür belirtin.

const [count, setCount] = useState(0);              // number
const [name, setName] = useState('');                // string

const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<Item[]>([]);      // explicit array type

useRef'i Türlendirme

İki biçim vardır: bir DOM öğesine başvuru (null olarak başlatılır) veya değiştirilebilir bir kapsayıcı.

const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<number | null>(null);

useEffect(() => {
  inputRef.current?.focus();
  timerRef.current = window.setInterval(tick, 1000);
  return () => clearInterval(timerRef.current!);
}, []);

Olay İşleyicilerini Türlendirme

React'in sentetik olay türlerini kullanın.

function Form() {
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  function onClick(e: React.MouseEvent<HTMLButtonElement>) {
    /* ... */
  }
  return <form onSubmit={onSubmit}>...</form>;
}

Genel Bileşenler

Bileşenler genel olabilir; TypeScript tür parametresini çağrı noktasından çıkarır.

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

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

<List<User>
  items={users}
  renderItem={u => u.name}
  keyOf={u => u.id}
/>

Özel Kancaları Türlendirme

Özel kancalar işlevdir; onları diğer tüm işlevler gibi türlendirin. Dizilerin türünün genişlemesini önlemek için döndürülen demetlere açık bir belirtim ekleyin.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle]; // tuple — annotation makes this stable
}

const [isOpen, toggle] = useToggle();

Bağlamı Türlendirme

createContext, sağlayacağınız değerle aynı türde bir başlangıç değeri gerektirir. Null olmayan bir belirtim veya varsayılan bir nesne kullanın.

interface AuthContextValue {
  user: User | null;
  signIn: (email: string, pw: string) => Promise<void>;
  signOut: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

useReducer'ı Türlendirme

Durumu ve eylem birleşimini açıkça türlendirin.

type State = { count: number };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; value: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'set':       return { count: action.value };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

React.FC Kullanımından Kaçınma

React.FC artık daha az tercih ediliyor: örtük olarak alt öğeler ekliyor, genel bileşenleri temiz bir şekilde desteklemiyor ve bazı iyileştirmeleri engelliyor. Türlendirilmiş özelliklere sahip sade işlev bileşenlerini tercih edin.

ComponentPropsWithoutRef Yardımcı Türü

Yerel bir öğenin özelliklerini devralmak (bir düğmeyi veya girdi alanını genişletmek) için ComponentPropsWithoutRef kullanın.

type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
  variant?: 'primary' | 'secondary';
};

function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={`btn ${variant}`} {...rest} />;
}

Hızlı Kontrol

Basit, türü belirtilmiş işlev bileşenleri yerine React.FC kullanılması neden genellikle önerilmez?

Özet: TypeScript + React

Özelliklerin türlerini arayüzlerle belirtin ve React.FC yerine basit işlevleri tercih edin. children: React.ReactNode. useState çoğu zaman türü kendiliğinden çıkarır; null veya boş diziler için tür belirtin. DOM öğeleri için useRef kullanın. İşleyicilerde React olay türlerini kullanın. Yeniden kullanılabilir listeler ve formlar için genel bileşenler kullanın. Özel kancalardan dönen demetin türü belirtilmelidir. Yerel öğeleri genişletmek için ComponentPropsWithoutRef kullanın.

Sıkça Sorulan Sorular

“React ile TypeScript: FC Genel Türleri ve Kancalar” dersi ücretsiz mi?

Evet — “React ile TypeScript: FC Genel Türleri ve Kancalar” 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.

“React ile TypeScript: FC Genel Türleri ve Kancalar” dersinde ne öğreneceğim?

React bileşenlerini genel türde özelliklerle türlendirmeyi, useState ve useRef için açık türler belirtmeyi ve demet döndüren özel kancaları türlendirmeyi öğrenin. 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 3. dersidir.

“React ile TypeScript: FC Genel Türleri ve Kancalar” 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. Şablon Dize Türleri
  2. Dekoratörler ve Üstveriler
  3. React ile TypeScript: FC Genel Türleri ve Kancalar
  4. Katı Mod ve any Kullanımını Kaldırma
← Frontend Academy Sayfasına Dön