TypeScript Academy · Pelajaran

Menentukan Tipe Props Komponen React

Definisikan antarmuka prop dan gunakan FC atau tipe nilai kembali eksplisit.

Menentukan Tipe Props Komponen React adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. 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 4 pelajaran total.

Selamat Datang

Pelajaran ini membahas cara memberi tipe pada properti komponen React menggunakan TypeScript.

Antarmuka Properti Komponen

Tentukan antarmuka properti untuk komponen React guna mendokumentasikan dan memberlakukan antarmuka komponen.

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

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

FC dibandingkan Tipe Pengembalian Eksplisit

React.FC secara otomatis menambahkan anak dan tipe lainnya. Tipe pengembalian eksplisit (JSX.Element | null) sering kali lebih jelas.

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

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

Menentukan Tipe useState

useState menyimpulkan tipe dari nilai awal. Berikan parameter tipe ketika nilai awalnya null atau ambigu.

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

Menentukan Tipe useReducer

useReducer bekerja paling baik dengan tipe tindakan berupa gabungan terbedakan.

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

Menentukan Tipe useRef untuk DOM

useRef untuk elemen DOM memerlukan argumen tipe. Inisialisasikan dengan null karena elemennya belum ada.

const inputRef = useRef<HTMLInputElement>(null);

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

Menentukan Tipe Penangan Peristiwa

Tipe peristiwa React mencakup React.ChangeEvent, React.MouseEvent, dan React.FormEvent.

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

Komponen Generik

Komponen generik menerima parameter tipe untuk daftar dan pilihan yang fleksibel serta aman tipe.

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

forwardRef dengan TypeScript

forwardRef memerlukan parameter tipe untuk tipe elemen referensi dan properti.

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

Tipe Pengembalian Kait Kustom

Tentukan nilai pengembalian kait kustom secara eksplisit untuk menghindari penyimpulan any[] pada pengembalian tuple.

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

Konteks dengan TypeScript

Beri tipe pada konteks React dengan gabungan yang mencakup undefined agar konsumen dipaksa memeriksa konteks tersebut.

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

Pemeriksaan Singkat

Apa tipe yang tepat untuk referensi ke elemen masukan HTML?

Ringkasan

Beri tipe pada properti React dengan antarmuka, useState dengan parameter tipe, peristiwa dengan tipe peristiwa React, referensi dengan generik elemen DOM, dan forwardRef dengan dua parameter tipe. Komponen generik memungkinkan antarmuka pengguna yang dapat digunakan ulang dan aman tipe.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menentukan Tipe Props Komponen React” gratis?

Ya — teks lengkap “Menentukan Tipe Props Komponen React” 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 4 pelajaran total.

Apa yang akan aku pelajari di “Menentukan Tipe Props Komponen React”?

Definisikan antarmuka prop dan gunakan FC atau tipe nilai kembali eksplisit. 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 1 dari 4.

Berapa lama pelajaran “Menentukan Tipe Props Komponen React” 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

Menentukan Tipe Props Komponen React
Menentukan Tipe useState dan useReducer
Menentukan Tipe useRef dan Penangan Event
Komponen Generik dan forwardRef

← Kembali ke TypeScript Academy