TypeScript - Type Guards: A Beginner's Guide

Ciao là, futuro superprogrammatore! ? Sono entusiasta di essere il tuo guida in questo emozionante viaggio nel mondo di TypeScript e delle Type Guards. Come qualcuno che ha insegnato scienze informatiche per molti anni, posso dirti che comprendere le type guards è come avere un superpotere nell'universo di TypeScript. Allora, entriamo in dettaglio e sblocchiamo insieme questa forza!

Cos'è una Type Guard?

Prima di immergerci nei dettagli, capiremo cos'è una type guard. Immagina di essere un guardiano di sicurezza a una festa di lusso. Il tuo lavoro è controllare ciascun invito degli ospiti e assicurarti che possano accedere alle aree appropriate. Le type guards in TypeScript fanno un lavoro simile - aiutano il compilatore a controllare e restringere il tipo di una variabile entro un determinato blocco di codice.

Ora, esploriamo le tre principali tipologie di guardie che impareremo oggi:

Type Guard	Descrizione
typeof	Controlla il tipo di una variabile
in	Controlla se una proprietà esiste in un oggetto
instanceof	Controlla se un oggetto è un'istanza di una classe

La Type Guard 'typeof' in TypeScript

La type guard 'typeof' è come chiedere, "Che tipo di cosa sei?" Si utilizza per controllare il tipo di una variabile. Ecco un esempio:

function printAll(strs: string | string[] | null) {
if (typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
} else {
// non fare nulla
}
}

In questo esempio, stiamo utilizzando typeof per controllare se strs è un oggetto (che include gli array) o una stringa. Se è un oggetto, lo loopiamo. Se è una stringa, la stampiamo direttamente.

Ecco un modo divertente per ricordarlo: immagina di essere in un negozio di animali e di voler sapere se un animale è un cane o un gatto. Potresti chiedere, "Che tipo di animale sei?" Esattamente ciò che typeof fa in TypeScript!

La Type Guard 'in' in TypeScript

La type guard 'in' è come chiedere, "Hai questa caratteristica?" Controlla se una proprietà esiste in un oggetto. Ecco un esempio:

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
if ("swim" in animal) {
animal.swim();
} else {
animal.fly();
}
}

In questo codice, stiamo controllando se l'animal ha una proprietà swim. Se esiste, supponiamo che sia un Fish e chiamiamo il metodo swim. Altrimenti, supponiamo che sia un Bird e chiamiamo il metodo fly.

Pensa a questo: se stai cercando di scoprire se il tuo nuovo animale è un pesce o un uccello, potresti controllare se ha pinne. Questo è ciò che fa la 'in' type guard - controlla una proprietà caracteristica.

La Type Guard 'instanceof' in TypeScript

La type guard 'instanceof' è come chiedere, "Sei un membro di questa famiglia?" Controlla se un oggetto è un'istanza di una particolare classe. Ecco un esempio:

class Bird {
fly() {
console.log("Volando...");
}
}

class Fish {
swim() {
console.log("Nuotando...");
}
}

function move(pet: Bird | Fish) {
if (pet instanceof Bird) {
pet.fly();
} else {
pet.swim();
}
}

let myBird = new Bird();
move(myBird); // Output: Volando...

In questo esempio, stiamo controllando se pet è un'istanza della classe Bird. Se lo è, chiamiamo il metodo fly. Altrimenti, supponiamo che sia un Fish e chiamiamo il metodo swim.

Immagina di essere a una riunione di famiglia e di voler scoprire se qualcuno è parte della famiglia Johnson. Potresti chiedere, "Sei un Johnson?" Esattamente ciò che instanceof fa in TypeScript!

Mettere Tutto Insieme

Ora che abbiamo imparato queste tre type guards, vediamo come potremmo usarle tutte insieme:

class Car {
drive() { console.log("Vroom!"); }
}

class Bicycle {
ride() { console.log("Pedala!"); }
}

type Vehicle = Car | Bicycle | string;

function useVehicle(vehicle: Vehicle) {
if (typeof vehicle === "string") {
console.log(`Il veicolo è: ${vehicle}`);
} else if (vehicle instanceof Car) {
vehicle.drive();
} else if ("ride" in vehicle) {
vehicle.ride();
} else {
console.log("Tipo di veicolo sconosciuto");
}
}

useVehicle("Skateboard");  // Output: Il veicolo è: Skateboard
useVehicle(new Car());     // Output: Vroom!
useVehicle(new Bicycle()); // Output: Pedala!

In questo esempio, stiamo utilizzando tutte e tre le type guards:

1. Usiamo typeof per controllare se il veicolo è una stringa.
2. Usiamo instanceof per controllare se è una Car.
3. Usiamo in per controllare se ha un metodo ride (che indicherebbe che è una Bicycle).

Questo è come essere un super investigatore, usando tutte le tue abilità per scoprire esattamente che tipo di veicolo stai affrontando!

Conclusione

Eccoci qui, miei apprendisti di programmazione! Abbiamo viaggiato attraverso il paese delle TypeScript Type Guards, esplorando le guardie typeof, in e instanceof. Questi potenti strumenti ti aiuteranno a scrivere codice più sicuro e prevedibile, permettendo a TypeScript di comprendere meglio le tue intenzioni.

Ricorda, usare le type guards è come avere una conversazione amichevole con il tuo codice. Stai semplicemente facendo domande per comprenderlo meglio. Quindi la prossima volta che stai programmando, non essere timido - avvia una chiacchierata con le tue variabili usando queste type guards!

Continua a praticare, rimani curioso, e prima di sapere, sarai un professionista nella protezione dei tipi. Fino alla prossima volta, happy coding! ??

Credits: Image by storyset