TypeScript Academy · Pelajaran

Menaip useRef dan Pengendali Peristiwa

Kendalikan rujukan DOM dan peristiwa sintetik dengan selamat.

Pelajaran 3 daripada 413 langkah

Menaip useRef dan Pengendali Peristiwa ialah pelajaran TypeScript Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran TypeScript Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Selamat Datang

Pelajaran ini merangkumi penaipan useRef dan pengendali peristiwa dalam TypeScript dengan React.

Antara Muka Prop Komponen

Takrifkan antara muka prop untuk komponen React bagi mendokumentasikan dan menguatkuasakan API komponen.

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

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

FC berbanding Jenis Pulangan Eksplisit

React.FC menambahkan children dan jenis lain secara automatik. Jenis pulangan yang dinyatakan secara eksplisit (JSX.Element | null) selalunya 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>;
}

Penaipan useState

useState membuat inferens jenis daripada nilai awal. Berikan parameter jenis apabila nilai awal ialah null atau samar-samar.

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

Penaipan useReducer

useReducer berfungsi paling baik dengan jenis tindakan kesatuan terbeza.

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

Penaipan useRef untuk DOM

useRef bagi elemen DOM memerlukan argumen jenis. Mulakannya dengan null kerana elemen itu belum wujud.

const inputRef = useRef<HTMLInputElement>(null);

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

Penaipan Pengendali Peristiwa

Jenis peristiwa React termasuk 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 jenis untuk senarai dan pilihan yang fleksibel serta selamat dari segi jenis.

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 jenis bagi kedua-dua jenis elemen ref dan prop.

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

Jenis Pulangan Cangkuk Tersuai

Taipkan nilai pulangan cangkuk tersuai secara eksplisit untuk mengelakkan inferens any[] bagi pulangan tuple.

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

Konteks dengan TypeScript

Taipkan konteks React dengan kesatuan yang merangkumi undefined supaya pengguna dipaksa menyemak 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;
}

Semakan Pantas

Apakah jenis yang betul bagi ref kepada elemen input HTML?

Jawab dalam pelajaran interaktif

Imbas Kembali

Taipkan prop React menggunakan antara muka, useState menggunakan parameter jenis, peristiwa menggunakan jenis peristiwa React, ref menggunakan generik elemen DOM dan forwardRef menggunakan dua parameter jenis. Komponen generik membolehkan antara muka pengguna boleh guna semula yang selamat dari segi jenis.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 101
Pelajaran: 352

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menaip useRef dan Pengendali Peristiwa” percuma?

Ya — teks penuh “Menaip useRef dan Pengendali Peristiwa” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus TypeScript Academy, tingkat taraf kepada CoddyKit PRO. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menaip useRef dan Pengendali Peristiwa”?

Kendalikan rujukan DOM dan peristiwa sintetik dengan selamat. Anda berlatih TypeScript Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan TypeScript Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran TypeScript Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Menaip useRef dan Pengendali Peristiwa” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy