TypeScript dengan React: Generik FC dan Hook
Tentukan tipe komponen React dengan props generik, beri anotasi tipe eksplisit pada useState dan useRef, serta tentukan tipe hook khusus yang mengembalikan tuple.
TypeScript dengan React: Generik FC dan Hook adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Memberi Tipe pada Komponen
React modern: berikan tipe pada properti dengan antarmuka dan gunakan fungsi biasa. React.FC tersedia, tetapi tidak lagi disarankan (anak ditambahkan secara implisit dan tidak mendukung generik).
// Recommended:
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
function Button({ label, onClick, disabled }: ButtonProps) {
return <button onClick={onClick} disabled={disabled}>{label}</button>;
}Memberi Tipe pada Anak
Gunakan React.ReactNode untuk anak apa pun yang dapat dirender.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
{children}
</div>
);
}Memberi Tipe pada useState
useState biasanya menyimpulkan tipe dari nilai awal. Berikan tipe eksplisit saat nilai awalnya null atau tidak mewakili semua kemungkinan tipe.
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 typeMemberi Tipe pada useRef
Ada dua bentuk: referensi ke elemen DOM (diinisialisasi dengan null), atau wadah yang dapat diubah.
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!);
}, []);Memberi Tipe pada Penangan Peristiwa
Gunakan tipe peristiwa sintetis milik React.
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>;
}Komponen Generik
Komponen dapat bersifat generik—TypeScript menyimpulkan parameter tipe dari lokasi pemanggilan.
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}
/>Memberi Tipe pada Hook Khusus
Hook khusus adalah fungsi—berikan tipe seperti pada fungsi lainnya. Tuple yang dikembalikan memerlukan anotasi eksplisit agar tidak mengalami pelebaran menjadi array.
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();Memberi Tipe pada Konteks
createContext memerlukan nilai awal dengan tipe yang sama seperti nilai yang akan Anda berikan. Gunakan penegasan non-null atau objek bawaan.
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;
}Memberi Tipe pada useReducer
Berikan tipe status dan gabungan aksi secara eksplisit.
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 });Menghindari React.FC
React.FC tidak lagi populer: React.FC menambahkan anak secara implisit, tidak mendukung komponen generik dengan baik, dan menghambat beberapa pengoptimalan. Lebih baik gunakan komponen fungsi biasa dengan properti yang telah diberi tipe.
Utilitas ComponentPropsWithoutRef
Untuk mewarisi properti elemen bawaan (dengan memperluas tombol atau input), gunakan ComponentPropsWithoutRef.
type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
variant?: 'primary' | 'secondary';
};
function Button({ variant = 'primary', ...rest }: ButtonProps) {
return <button className={`btn ${variant}`} {...rest} />;
}Pemeriksaan Singkat
Mengapa penggunaan React.FC umumnya tidak disarankan dibandingkan komponen fungsi bertipe biasa?
Ringkasan: TypeScript + React
Berikan tipe pada properti dengan antarmuka, dan utamakan fungsi biasa daripada React.FC. children: React.ReactNode. useState sering kali dapat menyimpulkan tipe, tetapi berikan anotasi untuk nilai null atau array kosong. Gunakan useRef untuk elemen DOM. Gunakan tipe peristiwa React untuk handler. Gunakan komponen generik untuk daftar atau formulir yang dapat digunakan kembali. Hasil tuple dari hook khusus memerlukan anotasi. Gunakan ComponentPropsWithoutRef untuk memperluas elemen bawaan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “TypeScript dengan React: Generik FC dan Hook” gratis?
Ya — teks lengkap “TypeScript dengan React: Generik FC dan Hook” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “TypeScript dengan React: Generik FC dan Hook”?
Tentukan tipe komponen React dengan props generik, beri anotasi tipe eksplisit pada useState dan useRef, serta tentukan tipe hook khusus yang mengembalikan tuple. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 4.
Berapa lama pelajaran “TypeScript dengan React: Generik FC dan Hook” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Tipe Literal Templat
- Dekorator dan Metadata
- TypeScript dengan React: Generik FC dan Hook
- Mode Ketat dan Menghapus any