Bonnes pratiques pour la logique conditionnelle en TypeScript

Cet article explique les bonnes pratiques pour la logique conditionnelle en TypeScript.

YouTube Video

Bonnes pratiques pour la logique conditionnelle en TypeScript

Réduction des types avec les gardes de type

En exploitant le système de typage de TypeScript et en utilisant des gardes de type dans les instructions if, vous pouvez améliorer la sécurité des types et la lisibilité.

1function processInput(input: string | number) {
2    if (typeof input === "string") {
3        console.log(`String input: ${input.toUpperCase()}`);
4    } else {
5        console.log(`Number input: ${input.toFixed(2)}`);
6    }
7}

L'utilisation de typeof et d'autres gardes de type garantit que le code de chaque bloc est sûr en termes de typage et pertinent dans son contexte.

Évitez les instructions if imbriquées

Les instructions if profondément imbriquées réduisent la lisibilité et la maintenabilité du code. À la place, utilisez des retours anticipés, des opérateurs logiques ou extrayez des fonctions.

Mauvais exemple :

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (user.age) {
3        if (user.age > 18) {
4            if (user.isAdmin) {
5                console.log("User is an adult admin.");
6            }
7        }
8    }
9}

Exemple amélioré :

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (!user.age || user.age <= 18 || !user.isAdmin) {
3        return;
4    }
5    console.log("User is an adult admin.");
6}

Cette approche aplatit le code et rend la logique plus compréhensible.

Utilisez le chaînage optionnel

Lors de la vérification de propriétés imbriquées, utilisez le chaînage optionnel (?.) pour éviter des conditions if inutiles.

Sans chaînage optionnel :

1if (user && user.profile && user.profile.email) {
2    console.log(user.profile.email);
3}

Avec chaînage optionnel :

1if (user?.profile?.email) {
2    console.log(user.profile.email);
3}

Cela réduit le code standard répétitif et améliore la lisibilité. Ici, le code standard fait référence à un code répétitif et standardisé souvent nécessaire pour accomplir des tâches spécifiques en programmation.

Utilisez des opérateurs d'égalité stricte

TypeScript prend en charge le typage strict, et l'utilisation d'une égalité stricte (===) ou d'une inégalité stricte (!==) aide à éviter les conversions de types inattendues.

Mauvais exemple :

1if (value == "123") {
2    console.log("Value is 123.");
3}

Exemple amélioré :

1if (value === "123") {
2    console.log("Value is 123.");
3}

Utilisez des enums ou des types littéraux pour des conditions explicites

L'utilisation d'enums ou de types littéraux clarifie les conditions et réduit les risques d'erreurs.

 1type Status = "success" | "error" | "loading";
 2
 3function displayMessage(status: Status) {
 4    if (status === "success") {
 5        console.log("Operation succeeded.");
 6    } else if (status === "error") {
 7        console.log("Operation failed.");
 8    } else {
 9        console.log("Loading...");
10    }
11}

En définissant des valeurs attendues, TypeScript peut détecter les types et garantir leur exactitude.

Combinez des conditions similaires

Lorsque plusieurs conditions partagent la même logique, regroupez-les en utilisant des opérateurs logiques ou une instruction switch.

Mauvais exemple :

1if (role === "admin") {
2    grantAccess();
3}
4if (role === "superadmin") {
5    grantAccess();
6}

Exemple amélioré :

1if (role === "admin" || role === "superadmin") {
2    grantAccess();
3}

Alternativement, utilisez une instruction switch pour gérer plusieurs branches claires :

 1switch (role) {
 2    case "admin":
 3    case "superadmin":
 4        grantAccess();
 5        break;
 6    case "user":
 7        console.log("Limited access.");
 8        break;
 9    default:
10        console.log("No access.");
11}

Évitez de rendre les expressions conditionnelles complexes

Les expressions conditionnelles complexes dans les instructions if réduisent la lisibilité. Extrayez-les dans des variables ou fonctions significatives.

Mauvais exemple :

1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2    console.log("User can write.");
3}

Exemple amélioré :

1const isAdultAdminWithWriteAccess = user.age > 18 && user.isAdmin && user.permissions.includes("write");
2if (isAdultAdminWithWriteAccess) {
3    console.log("User can write.");
4}

Nommer les conditions améliore la clarté et rend le code auto-documenté.

Utilisez des opérateurs ternaires pour les conditions simples

Pour les conditions simples, l'utilisation d'opérateurs ternaires rend le code concis.

Exemple :

1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);

Cependant, évitez d'utiliser des opérateurs ternaires pour des conditions complexes car cela réduit la lisibilité.

Conclusion

En suivant ces bonnes pratiques, vous pouvez rendre les instructions if en TypeScript claires, efficaces et maintenables. Exploitez les fonctionnalités de TypeScript telles que les gardes de type, l'enchaînement optionnel et les énumérations pour améliorer la lisibilité et la robustesse de votre code. Gardez les conditions concises et claires, en visant un code toujours facile à comprendre et à maintenir.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video