0Pricing
TypeScript Academy · Ders

Bileşen genelleri — giriş

tür parametreleri, kısıtlamalar ve çıkarımla yeniden kullanılabilir bileşenler oluşturun; türleri belirlenmiş render özelliklerini ve anahtarları güvenle aktarın.

Bileşen genelleri — giriş, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 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, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.

Giriş

Hedef: <T> kullanarak birçok veri şekliyle çalışabilen tek bir bileşen oluşturun. Türü belirlenmiş bir oluşturma özelliği aktaracak, anahtarları kısıtlayacak ve TypeScript'in kullanımdan T türünü çıkarmasına izin vereceksiniz.

  • Jenerik özellikler ve oluşturma işlevleri
  • extends ile kısıtlamalar
  • herhangi bir kullanmadan anahtar çıkarma

Jenerik Liste<T>

Jenerik bir List<T>, öğeleri ve oluşturma işlevini uyumlu tutar. Tüketiciler herhangi bir T aktarabilir; T açık olduğunda tür çıkarımı çalışır.

import React from "react"

type ListProps<T> = { items: T[]; render: (item: T, index: number) => React.ReactNode }

export function List<T>({ items, render }: ListProps<T>) {
  return <div style={{ display: "grid", gap: 6 }}>{items.map(render)}</div>
}

export default function App() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <List<number> items={[1,2,3]} render={(n) => <span>#{n}</span>} />
      <List<{ id: string; name: string }>
        items={[{ id: "u1", name: "Ada" }, { id: "u2", name: "Lin" }]}
        render={(u) => <strong>{u.name}</strong>}
      />
    </div>
  )
}

extends ile kısıtlamalar

Anahtarlar için bir id gerektirmek üzere T extends Keyed kullanın. Çağıranlar, gerekli alanı olmayan öğeleri aktarırlarsa hata alır.

import React from "react"

type Keyed = { id: string }

type KeyListProps<T extends Keyed> = { items: T[]; render: (item: T) => React.ReactNode }

export function KeyList<T extends Keyed>({ items, render }: KeyListProps<T>) {
  return (
    <ul>
      {items.map((x) => (
        <li key={x.id}>{render(x)}</li>
      ))}
    </ul>
  )
}

export default function App() {
  const users = [{ id: "u1", name: "Ada" }, { id: "u2", name: "Lin" }]
  return <KeyList items={users} render={(u) => <span>{u.name}</span>} />
}

T türünün çıkarımı

Tür parametreleri genellikle özelliklerden çıkarılır: burada T, items değerinden gelir. Yalnızca tür çıkarımı belirsiz olduğunda tür ek açıklaması verin.

import React from "react"

type GridProps<T> = { items: T[]; columns?: number; render: (item: T) => React.ReactNode }

export function Grid<T>({ items, columns = 2, render }: GridProps<T>) {
  const css = { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 8 }
  return <div style={css as React.CSSProperties}>{items.map(render)}</div>
}

export default function App() {
  const products = [
    { sku: "p1", title: "Mouse", price: 25 },
    { sku: "p2", title: "Keyboard", price: 80 }
  ]
  // T is inferred from products; no need to annotate
  return <Grid items={products} render={(p) => <span>{p.title} — ${p.price}</span>} />
}

Oluşturma yardımcıları

Açıklığı artırmak için yeniden kullanılabilir Render<T> türlerini çıkarın. Anahtarları desteklemek için gerektiğinde kısıtlayın (T extends { id: string }).

import React from "react"

type Render<T> = (item: T) => React.ReactNode

type TableProps<T extends { id: string }> = { items: T[]; renderRow: Render<T> }

export function Table<T extends { id: string }>({ items, renderRow }: TableProps<T>) {
  return (
    <table>
      <tbody>
        {items.map((x) => (
          <tr key={x.id}><td>{renderRow(x)}</td></tr>
        ))}
      </tbody>
    </table>
  )
}

export default function App() {
  const rows = [ { id: "1", label: "One" }, { id: "2", label: "Two" } ]
  return <Table items={rows} renderRow={(r) => <span>{r.label}</span>} />
}

İpuçları ve dikkat edilmesi gerekenler

İpuçları:

  • Tür çıkarımını tercih edin; yalnızca okunabilirliğe katkı sağladığında tür ek açıklaması verin.
  • Gereksinimleri ifade etmek için extends ile kısıtlayın.
  • Jenerik oluşturma özelliklerinde any kullanmaktan kaçının; bu, güvenliği ortadan kaldırır.

Jenerik bileşen kontrolü

Hızlı kontrol: Hangi bildirim, jenerik bir React bileşenini doğru şekilde tanımlar?

Özet

Özet: Yeniden kullanılabilir bileşenler oluşturmak için <T> kullanın, anahtarlar için extends ile kısıtlayın ve kodu kısa tutmak için tür çıkarımından yararlanın.

Sıkça Sorulan Sorular

“Bileşen genelleri — giriş” dersi ücretsiz mi?

Evet — “Bileşen genelleri — giriş” 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 3 dersten oluşur.

“Bileşen genelleri — giriş” dersinde ne öğreneceğim?

tür parametreleri, kısıtlamalar ve çıkarımla yeniden kullanılabilir bileşenler oluşturun; türleri belirlenmiş render özelliklerini ve anahtarları güvenle aktarı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, 3 dersinin 3. dersidir.

“Bileşen genelleri — giriş” 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

  1. Özellikler ve alt öğeler; olay işleyicileri; ref'ler
  2. Durum ve azaltıcılar; Context türlerini belirleme
  3. Bileşen genelleri — giriş
← TypeScript Academy Sayfasına Dön