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 = user.age > 18 && user.isAdmin && user.permissions.includes("write");
2if (isAdultAdminWithWriteAccess) {
3    console.log("User can write.");
4}

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à.

Conclusione

Seguendo queste migliori pratiche, puoi rendere le istruzioni if in TypeScript chiare, efficienti e manutenibili. Sfrutta funzionalità di TypeScript come i type guard, l'optional chaining e gli enum per migliorare la leggibilità e la robustezza del tuo codice. Mantieni le condizioni concise e chiare, puntando a un codice sempre facile da comprendere e mantenere.

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

YouTube Video