Costruire union discriminate
Contrassegni i membri di una union con una proprietà discriminante condivisa.
Costruire union discriminate è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cos'è un'unione discriminata?
Una unione discriminata è un'unione di tipi oggetto che condividono tutti una proprietà literal comune, chiamata discriminante. Questo tag condiviso permette a TypeScript di distinguere i vari membri.
// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;La proprietà discriminante
La discriminante deve essere un tipo letterale (come "circle"), non un tipo ampio come string. Ogni membro riceve un proprio valore letterale univoco.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"Ogni membro ha i propri campi
Oltre alla discriminante condivisa, ogni membro contiene i campi che hanno senso solo per quel membro. Un cerchio ha un radius; un quadrato ha un side.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;Costruire valori di un'unione
Quando costruisce un valore, TypeScript verifica che la struttura corrisponda esattamente a un membro dell'unione in base al suo kind.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 5 },
{ kind: "square", side: 4 }
];
console.log(shapes.length); // 2Perché non usare semplicemente campi opzionali?
Un tipo generico con campi opzionali (radius?, side?) consente combinazioni non valide. L'unione discriminata rende impossibile rappresentare gli stati non validi.
// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowedIl nome della discriminante dipende da lei
Il tag viene convenzionalmente chiamato kind o type, ma è possibile usare qualsiasi nome, purché ogni membro utilizzi lo stesso nome di proprietà con un valore letterale distinto.
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; delta: number };
const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"Modellare un calcolatore dell'area delle forme
Le unioni discriminate sono particolarmente utili quando ogni variante richiede una gestione diversa. Qui configuriamo alcune forme che una funzione per il calcolo dell'area elaborerà in seguito.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const myShapes: Shape[] = [
{ kind: "circle", radius: 3 },
{ kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);Aggiungere una terza variante
Le unioni possono essere estese. Aggiungere un membro triangle richiede una sola riga di modifica e TypeScript lo terrà in considerazione ovunque venga utilizzata l'unione.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number }
| { kind: "triangle"; base: number; height: number };
const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);I letterali univoci impediscono le sovrapposizioni
Poiché ogni kind è univoco, non c'è ambiguità. Un valore appartiene esattamente a un membro, mai a due contemporaneamente.
type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;
function describe(u: Union) {
return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));Discriminanti con tag booleani
La discriminante non deve necessariamente essere una stringa. Anche un letterale boolean funziona, il che è utile per i risultati di successo o fallimento.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);Le unioni discriminate nella pratica
Ora dispone di un modello completo per le forme. Nella prossima lezione applicheremo il narrowing sulla discriminante per accedere in sicurezza al campo specifico di ogni membro.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");Verifica rapida: discriminanti
Verifichi la sua comprensione delle unioni discriminate.
Riepilogo: costruire unioni discriminate
Ha imparato che una unione discriminata combina tipi oggetto che condividono una discriminante letterale come kind. Ogni membro contiene i propri campi, i letterali univoci impediscono le sovrapposizioni e questo schema rende impossibile rappresentare gli stati non validi.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);Domande Frequenti
La lezione «Costruire union discriminate» è gratuita?
Sì — il testo completo di «Costruire union discriminate» è 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 «Costruire union discriminate»?
Contrassegni i membri di una union con una proprietà discriminante condivisa. 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 1 di 4.
Quanto tempo richiede la lezione «Costruire union discriminate»?
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