Restringimento tramite discriminante
Permetta a TypeScript di restringere le varianti nelle istruzioni switch.
Restringimento tramite discriminante è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Applicare il narrowing sulla discriminante
Dopo aver verificato la discriminante, TypeScript applica il narrowing dell'unione al membro corrispondente e rende disponibili i suoi campi specifici. Questo è il vantaggio principale dello schema.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape) {
if (s.kind === "circle") return Math.PI * s.radius ** 2;
return s.side ** 2;
}
console.log(area({ kind: "circle", radius: 2 }).toFixed(2));Usare switch sulla discriminante
Uno switch sulla discriminante è il modo più chiaro per gestire ogni variante. All'interno di ogni case, il tipo viene ristretto automaticamente.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.radius ** 2;
case "square": return s.side ** 2;
}
}
console.log(area({ kind: "square", side: 5 }));Campi specifici del membro in ogni case
Nel caso "circle", s.radius è disponibile, mentre s.side non lo è. TypeScript sa esattamente in quale membro ci si trova.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function describe(s: Shape) {
switch (s.kind) {
case "circle": return "r=" + s.radius;
case "square": return "side=" + s.side;
}
}
console.log(describe({ kind: "circle", radius: 9 }));Narrowing basato su if
Non è necessario usare switch. Un semplice if che confronta la discriminante restringe il tipo con la stessa efficacia.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function perimeter(s: Shape): number {
if (s.kind === "circle") {
return 2 * Math.PI * s.radius;
}
return 4 * s.side;
}
console.log(perimeter({ kind: "square", side: 3 }));L'accesso al campo errato genera un errore
Prima di applicare il narrowing, non è possibile accedere a un campo specifico di un membro. TypeScript segnala un errore perché la proprietà non esiste in tutti i membri.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function broken(s: Shape) {
// Error: radius does not exist on Square
// return s.radius;
return s.kind;
}
console.log(broken({ kind: "square", side: 1 }));Narrowing con discriminanti booleane
Per un'unione { ok: true } | { ok: false }, il controllo if (r.ok) restringe il tipo al membro di successo.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
function handle(r: Result): string {
if (r.ok) return "Data: " + r.data;
return "Error: " + r.error;
}
console.log(handle({ ok: false, error: "boom" }));Narrowing con restituzione anticipata
Restituire il risultato in anticipo per una variante restringe il codice rimanente alle altre varianti: è un modo chiaro per gestire i casi uno alla volta.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function label(s: Shape): string {
if (s.kind === "circle") return "circle";
// s is now narrowed to Square here
return "square with side " + s.side;
}
console.log(label({ kind: "square", side: 8 }));Combinare con altre condizioni
È possibile combinare il controllo della discriminante con altra logica. TypeScript mantiene il narrowing finché la condizione sulla discriminante è vera in quel ramo.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function bigCircle(s: Shape): boolean {
return s.kind === "circle" && s.radius > 100;
}
console.log(bigCircle({ kind: "circle", radius: 150 }));Narrowing nei filtri degli array
Il narrowing funziona anche all'interno delle callback. Qui ogni forma viene verificata singolarmente durante l'iterazione.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 1 },
{ kind: "square", side: 2 }
];
shapes.forEach(s => {
if (s.kind === "circle") console.log("c", s.radius);
else console.log("s", s.side);
});I return di switch restano type-safe
Quando uno switch gestisce ogni caso e restituisce un valore, TypeScript deduce un tipo di ritorno preciso dall'unione dei risultati di tutti i case.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function tag(s: Shape) {
switch (s.kind) {
case "circle": return s.radius;
case "square": return s.side;
}
}
console.log(tag({ kind: "circle", radius: 4 }));Combinare tutti gli elementi del narrowing
Che utilizzi switch o if, è il controllo della discriminante a rendere sicuro l'accesso ai campi dei membri. Ora garantiremo che ogni caso venga gestito.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.side ** 2;
}
console.log(Math.round(area({ kind: "circle", radius: 10 })));Verifica rapida: narrowing
Verifichi la sua comprensione del narrowing delle discriminanti.
Riepilogo: applicare il narrowing sulla discriminante
Ha visto che il controllo della discriminante con switch o if restringe l'unione a un singolo membro, rendendo disponibili solo i campi di quel membro. Le restituzioni anticipate e le condizioni combinate mantengono il narrowing.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const s: Shape = { kind: "square", side: 7 };
console.log(s.kind === "square" ? s.side : 0);Domande Frequenti
La lezione «Restringimento tramite discriminante» è gratuita?
Sì — il testo completo di «Restringimento tramite discriminante» è 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 «Restringimento tramite discriminante»?
Permetta a TypeScript di restringere le varianti nelle istruzioni switch. 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 2 di 4.
Quanto tempo richiede la lezione «Restringimento tramite discriminante»?
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
- Costruire union discriminate
- Restringimento tramite discriminante
- Controllo di esaustività con never
- Modellare macchine a stati