TypeScript Academy · Lezione

Guardie di tipo

Lavori in sicurezza con i tipi unknown o any usando le guardie di tipo

Lezione 4 di 410 passaggi

Guardie di tipo è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Introduzione alle guardie di tipo

Guardie di tipo

Benvenuto/a alla prossima lezione! In questa lezione imparerà a conoscere le guardie di tipo, una funzionalità potente di TypeScript che consente di restringere i tipi durante l'esecuzione. Le guardie di tipo garantiscono la sicurezza dei tipi nel codice e aiutano a evitare errori. Iniziamo!

Guardie di tipo — illustrazione 1

Cosa sono le guardie di tipo?

Una guardia di tipo è una funzione o un costrutto che determina il tipo di una variabile durante l'esecuzione. Consente a TypeScript di restringere il tipo di una variabile all'interno di un blocco di codice specifico.

Esempio:

Attività: Scriva una funzione che utilizzi una guardia di tipo per verificare se un valore è un numero.

function isString(value: unknown): boolean {
  return typeof value === "string";
}

function printLength(value: unknown): void {
  if (isString(value)) {
    console.log(value.length); 
// TypeScript knows 'value' is a string here
  } else {
    console.log("Value is not a string");
  }
}

printLength("Hello"); 
// Output: 5
printLength(42); 
// Output: Value is not a string

Utilizzo di typeof per i tipi primitivi

Può utilizzare l'operatore typeof per verificare il tipo di valori primitivi come stringhe, numeri e valori booleani.

Esempio:

Attività: Utilizzi typeof per distinguere tra una stringa e un numero in una funzione.

function printValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printValue("Hello"); 
// Output: String value: Hello
printValue(42); 
// Output: Number value: 42

Utilizzo di instanceof per le classi

L'operatore instanceof verifica se un oggetto è un'istanza di una classe specifica. Esempio:

Attività: Utilizzi instanceof per gestire istanze di classi diverse in una funzione.

class Dog {
  bark(): void {
    console.log("Woof!");
  }
}

class Cat {
  meow(): void {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

let dog = new Dog();
let cat = new Cat();
makeSound(dog); 
// Output: Woof!
makeSound(cat); 
// Output: Meow!

Utilizzo di guardie di tipo personalizzate

Può creare funzioni di guardia di tipo personalizzate utilizzando un tipo restituito value is Type. Esempio:

interface Car {
  make: string;
  model: string;
}

interface Bike {
  brand: string;
  type: string;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return (vehicle as Car).make !== undefined;
}

function printVehicle(vehicle: Car | Bike): void {
  if (isCar(vehicle)) {
    console.log(`Car: ${vehicle.make} ${vehicle.model}`);
  } else {
    console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
  }
}

let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };

printVehicle(car); 
// Output: Car: Toyota Corolla
printVehicle(bike);
 // Output: Bike: Yamaha Sport

Unioni discriminate

Le unioni discriminate utilizzano una proprietà comune per distinguere tra i tipi. Esempio:

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}

let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };

console.log(calculateArea(circle)); 
// Output: 78.53981633974483
console.log(calculateArea(rectangle)); 
// Output: 200

Verifica dell'esaustività

La verifica dell'esaustività garantisce che tutti i casi possibili di un'unione discriminata vengano gestiti. Esempio:

function getShapeInfo(shape: Shape): string {
  switch (shape.kind) {
    case "circle":
      return `Circle with radius ${shape.radius}`;
    case "rectangle":
      return `Rectangle with dimensions ${shape.width}x${shape.height}`;
    default:
      // This line ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Errori comuni

Di seguito sono riportati alcuni errori comuni nell'utilizzo delle guardie di tipo:

  • Dimenticare di includere tutti i casi in un tipo unione.
  • Non utilizzare una guardia di tipo in tutti i rami della logica condizionale.
  • Utilizzare in modo errato as per eseguire il cast dei tipi senza controlli adeguati.

Suggerimento: utilizzi sempre le guardie di tipo per restringere i tipi prima di accedere alle proprietà o ai metodi specifici.

Ottimo lavoro!

Congratulazioni! Ha imparato a utilizzare le guardie di tipo in TypeScript per restringere i tipi durante l'esecuzione e garantire la sicurezza dei tipi. Le guardie di tipo sono essenziali per gestire tipi unione complessi e creare codice robusto e privo di errori. Nella prossima lezione approfondirà i tipi mappati avanzati. Continui a programmare!

Guardie di tipo — illustrazione 10
Gratis per iniziare

Impara TypeScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
101
Lezioni
352

Domande Frequenti

La lezione «Guardie di tipo» è gratuita?

Sì — il testo completo di «Guardie di tipo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Guardie di tipo»?

Lavori in sicurezza con i tipi unknown o any usando le guardie di tipo Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Guardie di tipo»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Generics
  2. Alias di tipo e interfacce
  3. Tipi di utilità
  4. Guardie di tipo
← Torna a TypeScript Academy