Migliori pratiche per la logica condizionale in TypeScript

Questo articolo spiega le migliori pratiche per la logica condizionale in TypeScript.

YouTube Video

Migliori pratiche per la logica condizionale in TypeScript

Restringere i tipi con i Type Guards

Sfruttando il sistema di tipi di TypeScript e utilizzando i type guards all'interno delle istruzioni if, è possibile migliorare la sicurezza dei tipi e la leggibilità.

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'uso di typeof e di altri type guards assicura che il codice all'interno di ogni blocco sia sicuro in termini di tipi e contestualmente rilevante.

Evitare istruzioni if nidificate

Le istruzioni if profondamente nidificate riducono la leggibilità e la manutenibilità del codice. In alternativa, utilizzare i ritorni anticipati, gli operatori logici o le funzioni estratte.

Esempio negativo:

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}

Esempio migliorato:

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}

Questo approccio appiattisce il codice e rende la logica più comprensibile.

Utilizzare l'Optional Chaining

Quando si verificano proprietà nidificate, utilizzare l'optional chaining (?.) per evitare condizioni if non necessarie.

Senza Optional Chaining:

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

Utilizzando l'Optional Chaining:

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

Questo riduce il codice ridondante e migliora la leggibilità. Qui, per codice ridondante si intende il codice ripetitivo e standardizzato spesso necessario per svolgere compiti specifici nella programmazione.

Utilizzare operatori di uguaglianza rigorosi

TypeScript supporta il tipaggio rigoroso, e l'uso di operatori di uguaglianza rigorosa (===) o disuguaglianza rigorosa (!==) aiuta a prevenire coercizioni di tipi inaspettate.

Esempio negativo:

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

Esempio migliorato:

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

Utilizzare enumerazioni o tipi letterali per condizioni esplicite

L'uso di enumerazioni o tipi letterali chiarisce le condizioni e riduce le probabilità di errori.

 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}

Definendo i valori attesi, TypeScript può rilevare i tipi e garantire l'accuratezza.

Combina condizioni simili

Quando più condizioni condividono la stessa logica, consolidale utilizzando operatori logici o un'istruzione switch.

Esempio negativo:

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

Esempio migliorato:

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

In alternativa, utilizza un'istruzione switch per gestire più diramazioni chiare:

 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}

Evita di rendere complesse le espressioni condizionali

Le espressioni condizionali complesse negli if riducono la leggibilità. Estrai le condizioni in variabili o funzioni significative.

Esempio negativo:

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

Esempio migliorato:

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

Assegnare un nome alle condizioni migliora la chiarezza e rende il codice autoesplicativo.

Usa operatori ternari per condizioni semplici

Per condizioni semplici, l'utilizzo di operatori ternari rende il codice conciso.

Esempio:

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

Tuttavia, evita di usare operatori ternari per condizioni complesse poiché riducono la leggibilità.

Sostituisci i rami condizionali con array o mappe

Quando la condizione è semplicemente una mappatura di valori, l'uso di array o mappe può migliorare la leggibilità e la manutenibilità del codice rispetto a istruzioni switch o blocchi complessi if-else. In TypeScript, puoi sfruttare le informazioni sui tipi per implementarlo in modo più sicuro.

Esempio negativo:

 1function getDayName(day: number): string {
 2    switch (day) {
 3        case 0:
 4            return "Sunday";
 5        case 1:
 6            return "Monday";
 7        case 2:
 8            return "Tuesday";
 9        case 3:
10            return "Wednesday";
11        case 4:
12            return "Thursday";
13        case 5:
14            return "Friday";
15        case 6:
16            return "Saturday";
17        default:
18            return "Invalid day";
19    }
20}

Esempio migliorato: Uso di un array

 1function getDayName(day: number): string {
 2    const days = [
 3        "Sunday",
 4        "Monday",
 5        "Tuesday",
 6        "Wednesday",
 7        "Thursday",
 8        "Friday",
 9        "Saturday"
10    ];
11    return days[day] ?? "Invalid day";
12}

Esempio migliorato: Uso di una mappa

 1function getDayName(day: number): string {
 2    const dayMap = new Map<number, string>([
 3        [0, "Sunday"],
 4        [1, "Monday"],
 5        [2, "Tuesday"],
 6        [3, "Wednesday"],
 7        [4, "Thursday"],
 8        [5, "Friday"],
 9        [6, "Saturday"]
10    ]);
11    return dayMap.get(day) ?? "Invalid day";
12}

Conclusione

Seguendo queste migliori pratiche, puoi rendere le istruzioni if in TypeScript chiare, efficienti e manutenibili. Utilizzando funzionalità di TypeScript come i type guard, l'optional chaining e gli enum, puoi migliorare la leggibilità e la robustezza del codice. Seguendo le best practice, puoi mantenere le condizioni concise e chiare, ottenendo un codice più facile da comprendere e da mantenere.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video