TypeScript Academy · Ders

Genel Bileşenler ve forwardRef

Genel türlerle yeniden kullanılabilir, türlendirilmiş bileşenler oluşturun

Genel Bileşenler ve forwardRef, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 4. 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

Bu derste React ile TypeScript'te jenerik bileşenler ve forwardRef konusu ele alınmaktadır.

Bileşen Özellikleri Arayüzü

Bileşen API'sini belgelemek ve zorunlu kılmak için React bileşenlerine yönelik bir özellikler arayüzü tanımlayın.

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

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

FC ve Açık Dönüş Türü Arasında

React.FC, children ve diğer türleri otomatik olarak ekler. Açık dönüş türü (JSX.Element | null) çoğu zaman daha anlaşılırdır.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

useState Türünü Belirtme

useState, türü başlangıç değerinden çıkarır. Başlangıç değeri null olduğunda veya belirsiz olduğunda bir tür parametresi sağlayın.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

useReducer Türünü Belirtme

useReducer, ayrımlı bir birleşim eylem türüyle en iyi şekilde çalışır.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

DOM için useRef Türünü Belirtme

DOM öğeleri için useRef bir tür bağımsız değişkeni gerektirir. Öğe henüz mevcut olmadığından null ile başlatın.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Olay İşleyicilerinin Türünü Belirtme

React olay türleri arasında React.ChangeEvent, React.MouseEvent ve React.FormEvent bulunur.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Jenerik Bileşenler

Jenerik bileşenler, esnek ve tür güvenli listeler ile seçim bileşenleri için bir tür parametresi kabul eder.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

TypeScript ile forwardRef

forwardRef, hem referans öğesi türü hem de özellikler için tür parametreleri gerektirir.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Özel Kancaların Dönüş Türleri

Demet dönüşlerinde any[] çıkarımını önlemek için özel kancaların dönüş değerlerinin türünü açıkça belirtin.

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

TypeScript ile Bağlam

Tüketicileri bağlamı denetlemeye zorlamak için React bağlamının türünü undefined içeren bir birleşim türüyle belirtin.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Hızlı Kontrol

HTML giriş öğesine yönelik bir referans için doğru tür nedir?

Özet

React özelliklerinin türlerini arayüzlerle, useState türlerini tür parametreleriyle, olayları React olay türleriyle, referansları DOM öğesi jenerikleriyle ve forwardRef'i çift tür parametreleriyle belirtin. Jenerik bileşenler, yeniden kullanılabilir ve tür güvenli kullanıcı arayüzleri oluşturmayı sağlar.

Sıkça Sorulan Sorular

“Genel Bileşenler ve forwardRef” dersi ücretsiz mi?

Evet — “Genel Bileşenler ve forwardRef” 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 Bileşenler ve forwardRef” dersinde ne öğreneceğim?

Genel türlerle yeniden kullanılabilir, türlendirilmiş bileşenler oluşturun 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 4. dersidir.

“Genel Bileşenler ve forwardRef” 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

React Bileşeni Özelliklerini Türlendirme
useState ve useReducer'ı Türlendirme
useRef ve Olay İşleyicilerini Türlendirme
Genel Bileşenler ve forwardRef

← TypeScript Academy Sayfasına Dön