Comprendre useState dans TypeScript React

Si vous travaillez avec React et TypeScript, vous avez probablement rencontré le hook useState. useState est un hook React fondamental qui vous permet d'ajouter un état aux composants fonctionnels. Dans un environnement de type sécurisé comme TypeScript, il est essentiel de comprendre comment utiliser useState efficacement. Nous explorerons en quoi useState dans Typescript diffère de son homologue JavaScript et comment utiliser le système de types de Typescript pour écrire un code plus robuste et plus maintenable.

Utilisation de base de useState dans TypeScript

En commençant par le cas le plus simple, TypeScript peut déduire le type de l'état en fonction de la valeur initiale :

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

Cependant, nous devons définir explicitement le type lorsqu'il s'agit d'un état plus complexe :

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

Dans cet exemple, User est une interface ou un type qui définit la forme de l'état. En fournissant le paramètre de type , nous disons à TypeScript que l'état peut être soit un objet User, soit null.

Inférence de type et types explicites

Lorsque vous travaillez avec du TypeScript, vous ressentirez souvent le besoin de ne pas utiliser de types explicites, mais il est important de savoir quand les utiliser. Les types explicites peuvent rendre votre code plus lisible et maintenable, en particulier lorsque vous travaillez en équipe ou sur une grande base de code.

Nous utilisons des types explicites lorsque :

• la valeur initiale est nulle ou indéfinie
• travailler avec des objets d'état complexes
• nous voulons imposer un type spécifique

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

Nous utilisons l'inférence de type lorsque :

• la valeur initiale indique clairement le type
• travailler avec des types primitifs
• l'État a une structure simple

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

Travailler avec des types d'état complexes

useState dans Typescript est crucial lorsque vous travaillez avec des objets d'état complexes. Examinons quelques scénarios courants :

Tableaux

Définir le type d'un état de tableau :

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

Définir le type d'un tableau d'objets :

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

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

Objets

Définir le type d'un état d'objet :

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

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

Définir des objets avec des propriétés facultatives :

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

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

Modèles courants et meilleures pratiques

Syndicats discriminés :

Lorsque vous traitez différents états de données, utilisez des unions discriminées pour garantir la sécurité des types :

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
}

Ici, le type RequestState garantit que la propriété data n'est disponible que lorsque le statut est « succès ». Lorsque le statut est « erreur », la propriété d'erreur est rendue disponible.

Tapez Guards avec useState

Les gardes Tye aident TypeScript à comprendre le type de l'état et à éviter les erreurs d'exécution.

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

Ici, TypeScript sait que l'utilisateur n'est pas nul à l'intérieur du bloc if, grâce au type guard. Cela évite les erreurs d'exécution lors de l'accès aux propriétés de l'utilisateur.

Fonctions de mise à jour

Lors de l'utilisation des fonctions de mise à jour de useState, il est important de fournir le type correct pour la nouvelle valeur d'état :

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

Ici, TypeScript déduit le type correct pour prevCount et prevUser en fonction de la valeur de l'état initial. Cela garantit la sécurité du type lors de la mise à jour de l'état.

Prévention des erreurs

L'utilisation de useState dans TypeScript permet d'éviter les erreurs courantes et indique les problèmes potentiels au moment de la compilation. En fournissant des types explicites et en utilisant des gardes de type, vous pouvez détecter les erreurs dès le début du processus de développement.

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

Conclusion

Comprendre comment utiliser correctement useState dans les composants TypeScript React est essentiel pour créer des applications sécurisées. Bien que cela puisse sembler un travail supplémentaire au début, les avantages de détecter les erreurs au moment de la compilation plutôt qu'à l'exécution en valent la peine. N'oubliez pas d'utiliser l'inférence de type lorsque cela est possible, mais n'hésitez pas à utiliser des types explicites lorsqu'ils rendent votre code plus maintenable et auto-documenté.

Que vous démarriez un nouveau projet ou que vous mainteniez un projet existant, maîtriser useState dans TypeScript vous aidera à écrire des applications React plus fiables avec moins d'erreurs d'exécution. Vous pouvez en savoir plus sur la dactylographie ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!