0Pricing
React Academy · Pelajaran

Menentukan Tipe Context & Hook Kustom

Buat context bertipe dengan nilai bawaan dan tulis hook kustom dengan tipe kembalian eksplisit.

Menentukan Tipe Context & Hook Kustom adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Konteks Bertipe dengan createContext

Teruskan tipe konteks dan nilai bawaan ke createContext. Gunakan null sebagai nilai bawaan ketika konteks harus digunakan di dalam penyedia, lalu tangani dengan penjaga.

interface AuthContextType {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

Pola Pengait Penjaga

Buat pengait khusus yang membaca konteks dan melemparkan galat jika digunakan di luar penyedianya. Ini menghilangkan pemeriksaan null di setiap lokasi pemanggilan.

export function useAuth(): AuthContextType {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Mengetik Penyedia

Komponen penyedia membungkus komponen anak dan memasok nilai konteks. Tentukan tipe objek nilai secara eksplisit agar TypeScript memverifikasi kesesuaiannya dengan tipe konteks.

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (creds: Credentials) => {
    const u = await apiLogin(creds);
    setUser(u);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Konteks dengan Nilai Bawaan

Ketika tersedia nilai bawaan yang masuk akal (misalnya tema), teruskan langsung ke createContext sehingga konteks tidak pernah null dan pengait penjaga tidak diperlukan.

interface ThemeContextType { theme: 'light' | 'dark'; toggle: () => void; }

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggle: () => {},
});

export const useTheme = () => useContext(ThemeContext);

Mengetik Nilai Pengembalian Pengait Khusus

Anotasikan tipe pengembalian pengait khusus secara eksplisit, atau biarkan TypeScript menyimpulkannya. Tipe eksplisit berfungsi sebagai dokumentasi dan mencegah perubahan bentuk yang tidak disengaja.

interface UseCounterReturn {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

function useCounter(initial = 0): UseCounterReturn {
  const [count, setCount] = useState(initial);
  return {
    count,
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
    reset: () => setCount(initial),
  };
}

Tipe Pengembalian Tupel

Pengait yang mengembalikan pasangan (seperti useState) menggunakan tupel. Tentukan tipenya dengan as const atau tipe tupel eksplisit agar destrukturisasi menyimpulkan tipe dengan benar.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

// Destructuring correctly infers types:
const [isOpen, toggleOpen] = useToggle();

Pengait Khusus Generik

Pengait khusus juga dapat bersifat generik. Pengait generik useLocalStorage menyimpan tipe apa pun yang dapat diserialisasi dengan keamanan tipe lengkap.

function useLocalStorage<T>(key: string, initialValue: T): [T, (val: T) => void] {
  const [stored, setStored] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch { return initialValue; }
  });

  const setValue = (val: T) => {
    setStored(val);
    localStorage.setItem(key, JSON.stringify(val));
  };

  return [stored, setValue];
}

Mengetik useReducer

Tentukan tipe aksi sebagai gabungan terdiskriminasi dan bentuk keadaan sebagai antarmuka. TypeScript akan menegakkan tipe aksi yang valid dalam fungsi peredam.

interface State { count: number; status: 'idle' | 'loading'; }
type Action =
  | { type: 'INCREMENT' }
  | { type: 'SET_STATUS'; payload: State['status'] };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT': return { ...state, count: state.count + 1 };
    case 'SET_STATUS': return { ...state, status: action.payload };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0, status: 'idle' });

Mengetik useCallback & useMemo

TypeScript menyimpulkan tipe untuk useCallback dan useMemo dari fungsi pabrik. Beri anotasi secara eksplisit hanya ketika penyimpulan gagal.

const handleChange = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  },
  [onChange]
);

const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
); // inferred as typeof items

Pola Pemilih Konteks dengan Tipe

Pengait pemilih bertipe menerima fungsi pemilih dan hanya mengembalikan bagian yang diperlukan, dengan mempertahankan penyimpulan tipe sepenuhnya.

function useAuthSelector<T>(selector: (ctx: AuthContextType) => T): T {
  const ctx = useAuth();
  return selector(ctx);
}

// Usage — TypeScript infers User | null:
const user = useAuthSelector(ctx => ctx.user);

Menghindari Tipe Apa Pun dalam Pengait

Jangan pernah gunakan any dalam pengait khusus. Gunakan generik, unknown dengan penjaga tipe, atau antarmuka khusus agar rantai tipe tetap utuh.

// Bad:
function useFetch(url: string): { data: any; loading: boolean } { ... }

// Good:
function useFetch<T>(url: string): { data: T | null; loading: boolean } {
  const [data, setData] = useState<T | null>(null);
  // ...
  return { data, loading };
}

Pemeriksaan Cepat

Apa tujuan pola pengait penjaga saat menentukan tipe konteks React?

Ringkasan

Tentukan tipe konteks dengan antarmuka eksplisit dan pengait yang memeriksa null. Anotasikan tipe pengembalian pengait khusus dengan antarmuka atau tipe tupel, gunakan generik untuk pengait yang dapat digunakan kembali, dan tentukan tipe useReducer dengan aksi gabungan terdiskriminasi untuk mendeteksi pengiriman aksi yang tidak valid saat kompilasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menentukan Tipe Context & Hook Kustom” gratis?

Ya — teks lengkap “Menentukan Tipe Context & Hook Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menentukan Tipe Context & Hook Kustom”?

Buat context bertipe dengan nilai bawaan dan tulis hook kustom dengan tipe kembalian eksplisit. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 4 dari 4.

Berapa lama pelajaran “Menentukan Tipe Context & Hook Kustom” 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 React Academy ini?

Ya. Setiap pelajaran React 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. Menentukan Tipe Props & Nilai Kembalian Komponen
  2. Menentukan Tipe Event & Ref dalam TypeScript
  3. Komponen Generik & Tipe Utilitas
  4. Menentukan Tipe Context & Hook Kustom
← Kembali ke React Academy