Combinare i literal in union
Costruisca insiemi finiti di valori combinando tipi literal in union.
Combinare i literal in union è 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.
Unioni di tipi letterali
Un'unione di tipi letterali modella un valore che deve corrispondere esattamente a una delle opzioni note. È alla base delle macchine a stati, degli enum e delle API ben tipizzate.
type Status = 'idle' | 'loading' | 'success' | 'error';
let state: Status = 'idle';
state = 'loading';
console.log('State:', state);Usare uno switch su un'unione letterale
Uno switch su un'unione letterale è chiaro da leggere e il compilatore sa che ogni caso corrisponde a uno dei valori consentiti. È perfetto insieme ai controlli di esaustività.
type Status = 'idle' | 'loading' | 'done';
function label(s: Status): string {
switch (s) {
case 'idle': return 'Waiting';
case 'loading': return 'Working';
case 'done': return 'Finished';
}
}
console.log(label('loading'));Gestione esaustiva
La gestione di ogni membro di un'unione si chiama gestione esaustiva. Quando copre tutti i casi, TypeScript può dimostrare che la funzione restituisce sempre un valore, senza rami mancanti.
type Dir = 'left' | 'right';
function step(d: Dir): number {
if (d === 'left') return -1;
return 1; // only 'right' remains
}
console.log(step('left'), step('right'));Il trucco dell'esaustività con never
Assegnare il valore a un never nel ramo default forza un errore di compilazione se aggiunge un nuovo membro all'unione ma dimentica di gestirlo. È una rete di sicurezza per il codice in evoluzione.
type Shape = 'circle' | 'square';
function area(s: Shape): string {
switch (s) {
case 'circle': return 'pi r^2';
case 'square': return 'a^2';
default:
const _exhaustive: never = s;
return _exhaustive;
}
}
console.log(area('circle'));Derivare unioni da oggetti const
Un modello comune consiste nel conservare i valori in un oggetto const e derivare l'unione dai suoi valori usando typeof obj[keyof typeof obj]. Un'unica fonte di verità, due risultati.
const Colors = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Colors[keyof typeof Colors];
// 'red' | 'blue'
const c: Color = Colors.Blue;
console.log(c);Derivare unioni dalle chiavi
Può anche derivare un'unione delle chiavi con keyof typeof obj. È utile quando sono le chiavi stesse a rappresentare gli identificatori significativi.
const ICONS = { home: 0, search: 1, profile: 2 } as const;
type IconName = keyof typeof ICONS;
// 'home' | 'search' | 'profile'
const name: IconName = 'search';
console.log(name, ICONS[name]);Unioni discriminate con tag letterali
Associ ogni variante dell'oggetto a una proprietà tag letterale e TypeScript può distinguerle. Controllando il tag, il tipo si restringe alla forma esatta.
type Action =
| { type: 'add'; amount: number }
| { type: 'reset' };
function reduce(a: Action): number {
if (a.type === 'add') return a.amount;
return 0;
}
console.log(reduce({ type: 'add', amount: 5 }));Restringere il tipo tramite il discriminante
Dopo aver verificato il discriminante letterale, il compilatore sa quale variante possiede, quindi i suoi campi specifici diventano accessibili in sicurezza senza cast.
type Event =
| { kind: 'click'; x: number; y: number }
| { kind: 'key'; code: string };
function handle(e: Event): string {
if (e.kind === 'key') return 'Key ' + e.code;
return 'Click ' + e.x + ',' + e.y;
}
console.log(handle({ kind: 'key', code: 'Esc' }));Combinare più unioni
Può comporre unioni più grandi a partire da unioni denominate più piccole. In questo modo mantiene raggruppate le opzioni correlate e può riutilizzarle in tutto il codice.
type Primary = 'red' | 'blue' | 'yellow';
type Secondary = 'green' | 'orange';
type Color = Primary | Secondary;
const c: Color = 'green';
console.log(c);Le unioni come vincoli per le funzioni
Passare un'unione letterale a una funzione vincola i chiamanti alle opzioni valide e fornisce il completamento automatico nell'editor. La combinazione di sicurezza e facilità di esplorazione è difficile da superare.
type Align = 'left' | 'center' | 'right';
function setAlign(a: Align): void {
console.log('Aligned', a);
}
setAlign('center');
// setAlign('top'); // ErrorPerché le unioni letterali sono migliori delle stringhe
Un parametro string semplice accetta qualsiasi valore, compresi gli errori di battitura. Un'unione letterale rileva gli errori in fase di compilazione e documenta le scelte valide: un miglioramento evidente per un codice facile da mantenere.
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
function request(m: Method, url: string): void {
console.log(m, url);
}
request('POST', '/api/users');Verifica rapida
Verifichi la Sua comprensione delle unioni letterali.
Riepilogo: combinare i tipi letterali
Ha imparato a:
- Creare unioni di tipi letterali per insiemi finiti di opzioni.
- Gestirle in modo esaustivo, usando il trucco di
neverper maggiore sicurezza. - Derivare unioni da oggetti const tramite
keyof typeofetypeof obj[keyof typeof obj]. - Distinguere le varianti tramite proprietà tag letterali.
Nel prossimo corso esploreremo i tipi speciali unknown, never e void.
const ROUTES = { home: '/', about: '/about' } as const;
type Route = typeof ROUTES[keyof typeof ROUTES];
const r: Route = '/about';
console.log(r);
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 «Combinare i literal in union» è gratuita?
Sì — il testo completo di «Combinare i literal in union» è 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 «Combinare i literal in union»?
Costruisca insiemi finiti di valori combinando tipi literal in union. 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 «Combinare i literal in union»?
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
- Tipi literal stringa e numerici
- Literal booleani e inferenza dei literal
- Asserzioni const con as const
- Combinare i literal in union