0Pricing
TypeScript Academy · Pelajaran

Generik komponen — pengantar

Bangun komponen yang dapat digunakan ulang dengan parameter tipe , batasan, dan inferensi; teruskan render props serta kunci bertipe dengan aman.

Generik komponen — pengantar adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.

Pendahuluan

Tujuan: Buat satu komponen yang dapat digunakan untuk berbagai bentuk data dengan <T>. Anda akan meneruskan properti render bertipe, membatasi kunci, dan membiarkan TypeScript menyimpulkan T dari penggunaannya.

  • Properti generik dan fungsi render
  • Pembatasan dengan extends
  • Ekstraksi kunci tanpa any

List<T> generik

List<T> generik menjaga data dan fungsi render tetap selaras. Pemanggil dapat meneruskan T apa pun; inferensi berjalan jika T sudah jelas.

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>
  )
}

Pembatasan dengan extends

Gunakan T extends Keyed untuk mewajibkan id sebagai kunci. Pemanggil akan mendapatkan kesalahan jika meneruskan data tanpa bidang yang diwajibkan.

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>} />
}

Inferensi T

Parameter tipe biasanya disimpulkan dari properti: di sini, T berasal dari items. Beri anotasi hanya jika inferensinya tidak jelas.

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>} />
}

Pembantu render

Ekstrak tipe Render<T> yang dapat digunakan kembali agar lebih jelas. Berikan batasan jika diperlukan (T extends { id: string }) untuk mendukung kunci.

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>} />
}

Kiat dan hal yang perlu diperhatikan

Kiat:

  • Utamakan inferensi; beri anotasi hanya jika membantu keterbacaan.
  • Gunakan batasan dengan extends untuk menyatakan persyaratan.
  • Hindari any dalam properti render generik; hal itu menghilangkan keamanan.

Pemeriksaan komponen generik

Pemeriksaan cepat: Deklarasi mana yang mendefinisikan komponen React generik dengan benar?

Ringkasan

Ringkasan: Gunakan <T> untuk membangun komponen yang dapat digunakan kembali, berikan batasan dengan extends untuk kunci, dan biarkan inferensi menjaga kode tetap ringkas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Generik komponen — pengantar” gratis?

Ya — teks lengkap “Generik komponen — pengantar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Generik komponen — pengantar”?

Bangun komponen yang dapat digunakan ulang dengan parameter tipe , batasan, dan inferensi; teruskan render props serta kunci bertipe dengan aman. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “Generik komponen — pengantar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Props & children; penangan peristiwa; refs
  2. State & reducer; pengetikan Context
  3. Generik komponen — pengantar
← Kembali ke TypeScript Academy