Memahami useState dalam TypeScript React

Jika anda bekerja dengan React dan TypeScript, anda mungkin menjumpai cangkuk useState. useState ialah cangkuk React asas yang membolehkan anda menambah keadaan pada komponen berfungsi. Dalam persekitaran selamat jenis seperti TypeScript, adalah penting untuk memahami cara menggunakan useState dengan berkesan. Kami akan meneroka cara useState dalam Typescript berbeza daripada rakan JavaScript dan cara menggunakan sistem jenis Typescript untuk menulis kod yang lebih mantap dan boleh diselenggara.

Penggunaan asas useState dalam TypeScript

Bermula dengan kes yang paling mudah, skrip taip boleh membuat kesimpulan jenis keadaan berdasarkan nilai awal:

const [count, setCount] = useState(0); // type is inferred as number
const [text, setText] = useState(''); // type is inferred as string

Walau bagaimanapun, kita perlu mentakrifkan jenis secara eksplisit apabila berurusan dengan keadaan yang lebih kompleks:

const [user, setUser] = useState<User | null>(null);

Dalam contoh ini, Pengguna ialah antara muka atau jenis yang mentakrifkan bentuk keadaan. Dengan menyediakan parameter jenis , kami memberitahu TypeScript bahawa keadaan boleh sama ada objek Pengguna atau null.

Jenis Inferens vs Jenis Eksplisit

Apabila menggunakan skrip taip, anda akan sering merasakan keperluan untuk tidak menggunakan jenis yang jelas, tetapi penting untuk mengetahui masa untuk menggunakannya. Jenis eksplisit boleh menjadikan kod anda lebih mudah dibaca dan diselenggara, terutamanya apabila bekerja dalam pasukan atau pada pangkalan kod yang besar.

Kami menggunakan jenis eksplisit apabila:

• nilai awal adalah batal atau tidak ditentukan
• bekerja dengan objek keadaan kompleks
• kami mahu menguatkuasakan jenis tertentu

type Status = 'idle' | 'loading' | 'success' | 'error';
const [status, setStatus] = useState<Status>('idle');

Kami menggunakan inferens jenis apabila:

• nilai awal dengan jelas menunjukkan jenis
• bekerja dengan jenis primitif
• negeri mempunyai struktur yang mudah

const [isLoading, setIsLoading] = useState(false);
const [count, setCount] = useState(0);

Bekerja dengan jenis keadaan yang kompleks

useState dalam Typescript adalah penting apabila bekerja dengan objek keadaan kompleks. Mari lihat beberapa senario biasa:

Tatasusunan

Mentakrifkan jenis keadaan tatasusunan:

const [items, setItems] = useState<string[]>([]);
// or let TypeScript infer
const [numbers, setNumbers] = useState([1, 2, 3]);

Mentakrifkan jenis tatasusunan objek:

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const [todos, setTodos] = useState<Todo[]>([]);

Objek

Mentakrifkan jenis keadaan objek:

interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User>({ name: '', age: 0 });

Mentakrifkan objek dengan sifat pilihan:

interface FormData {
  username: string;
  email: string;
  age?: number;
}

const [formData, setFormData] = useState<FormData>({
  username: '',
  email: ''
});

Corak biasa dan amalan terbaik

Kesatuan Terdiskriminasi:

Apabila berurusan dengan keadaan data yang berbeza, gunakan kesatuan yang didiskriminasi untuk memastikan keselamatan jenis:

type RequestState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function useData<T>() {
  const [state, setState] = useState<RequestState<T>>({ status: 'idle' });
  // ... rest of the logic
}

Di sini, jenis RequestState memastikan bahawa sifat data hanya tersedia apabila status 'berjaya'. Apabila status adalah 'ralat', sifat ralat disediakan.

Taip Pengawal dengan useState

Pengawal Tye membantu TypeScript memahami jenis keadaan dan mengelakkan ralat masa jalan.

const [count, setCount] = useState(0); // type is inferred as number
const [text, setText] = useState(''); // type is inferred as string

Di sini, TypeScript mengetahui bahawa pengguna bukan nol di dalam blok if, terima kasih kepada pengawal jenis. Ini menghalang ralat masa jalan semasa mengakses sifat pengguna.

Fungsi Kemas Kini

Apabila menggunakan fungsi pengemas kini daripada useState, adalah penting untuk menyediakan jenis yang betul untuk nilai keadaan baharu:

const [user, setUser] = useState<User | null>(null);

Di sini, TypeScript menyimpulkan jenis yang betul untuk prevCount dan prevUser berdasarkan nilai keadaan awal. Ini memastikan keselamatan jenis semasa mengemas kini keadaan.

Pencegahan Ralat

Menggunakan useState dalam skrip taip membantu mencegah ralat biasa dan menunjukkan potensi isu pada masa penyusunan. Dengan menyediakan jenis yang jelas dan menggunakan pengawal jenis, anda boleh menangkap ralat pada awal proses pembangunan.

type Status = 'idle' | 'loading' | 'success' | 'error';
const [status, setStatus] = useState<Status>('idle');

Kesimpulan

Memahami cara menggunakan useState dalam komponen TypeScript React dengan betul adalah penting untuk membina aplikasi selamat jenis. Walaupun ia mungkin kelihatan seperti kerja tambahan pada mulanya, faedah menangkap ralat pada masa penyusunan dan bukannya masa jalan menjadikannya berbaloi dengan usaha. Ingat untuk menggunakan inferens jenis apabila boleh, tetapi jangan lari daripada jenis eksplisit apabila ia menjadikan kod anda lebih boleh diselenggara dan mendokumentasikan diri.

Sama ada anda memulakan projek baharu atau mengekalkan projek sedia ada, menguasai useState dalam TypeScript akan membantu anda menulis aplikasi React yang lebih dipercayai dengan ralat masa jalan yang lebih sedikit. Anda boleh membaca lebih lanjut tentang skrip taip di sini.

Atas ialah kandungan terperinci Memahami useState dalam TypeScript React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!