0Pricing
TypeScript Academy · Lezione

TupleToUnion e UnionToIntersection

Converta programmaticamente tra tuple e unioni.

TupleToUnion e UnionToIntersection è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 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.

TupleToUnion: il concetto

TupleToUnion converte un tipo tupla in un'unione dei tipi dei suoi elementi: è l'operazione inversa rispetto alla costruzione di una tupla a partire da singoli tipi.

type TupleToUnion<T extends readonly any[]> = T[number];
type A = TupleToUnion<[string, number, boolean]>; // string | number | boolean

Come funziona T[number]

L'indicizzazione di una tupla con number consente di accedere contemporaneamente a tutti gli indici numerici; TypeScript la esprime come un'unione dei tipi degli elementi.

type Tuple = [string, number, boolean];
type Elements = Tuple[number]; // string | number | boolean

TupleToUnion con as const

Combini con gli array as const per derivare unioni dagli array di valori.

const COLORS = ["red", "green", "blue"] as const;
type Color = typeof COLORS[number]; // "red" | "green" | "blue"

UnionToIntersection: il concetto

Convertire un'unione in un'intersezione è più complesso e richiede tipi condizionali distributivi insieme a tipi funzione per raccogliere tutti i membri.

type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

Perché funziona il trucco della funzione

La distribuzione sui membri dell'unione racchiude ciascun membro in un tipo funzione. TypeScript deduce quindi l'intersezione di tutti i tipi dei parametri per soddisfare il vincolo strutturale.

type A = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

UnionToTuple: un problema complesso

Convertire un'unione in una tupla è teoricamente possibile, ma dipende dall'ordine di valutazione (che TypeScript non garantisce): ne eviti l'uso in produzione.

// Not reliable — union member order is unspecified
// Use TupleToUnion (safe) not UnionToTuple (fragile)

Uso pratico di TupleToUnion

Estragga tutte le chiavi valide da una tupla di string literal per creare un tipo unione da utilizzare nella validazione.

const ALLOWED_METHODS = ["GET", "POST", "PUT", "DELETE"] as const;
type HttpMethod = typeof ALLOWED_METHODS[number];
function request(method: HttpMethod) { /* ... */ }

Uso pratico di UnionToIntersection

Unisca più interfacce mixin di un'unione in un singolo tipo combinato.

type Mixin1 = { log(): void };
type Mixin2 = { save(): Promise<void> };
type Combined = UnionToIntersection<Mixin1 | Mixin2>;
// { log(): void } & { save(): Promise<void> }

Intersezione di tipi primitivi

L'intersezione di tipi primitivi non correlati produce never, poiché nessun valore può essere contemporaneamente string e number.

type X = UnionToIntersection<string | number>; // never

Utilizzo nei vincoli generici

Combini TupleToUnion e UnionToIntersection all'interno dei vincoli generici per creare API flessibili e type-safe.

function merge<T extends object[]>(...args: T): UnionToIntersection<T[number]> {
  return Object.assign({}, ...args) as any;
}

Riepilogo: Tuple ↔ Union ↔ Intersection

TupleToUnion utilizza l'indicizzazione con T[number]. UnionToIntersection utilizza il trucco della funzione distributiva con infer. Entrambi sono strumenti essenziali per la manipolazione avanzata dei tipi.

Verifica rapida

Che cos'è TupleToUnion<[string, number]>?

Cosa ha imparato

TupleToUnion utilizza l'indicizzazione numerica per estrarre le unioni degli elementi dalle tuple. UnionToIntersection utilizza il trucco della funzione distributiva. Questi sono schemi fondamentali per la manipolazione avanzata dei tipi TypeScript.

Domande Frequenti

La lezione «TupleToUnion e UnionToIntersection» è gratuita?

Sì — il testo completo di «TupleToUnion e UnionToIntersection» è 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 «TupleToUnion e UnionToIntersection»?

Converta programmaticamente tra tuple e unioni. 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 3 di 4.

Quanto tempo richiede la lezione «TupleToUnion e UnionToIntersection»?

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. DeepPartial e DeepReadonly
  2. Utility Flatten e UnwrapPromise
  3. TupleToUnion e UnionToIntersection
  4. Pubblicazione di una libreria di utility per i tipi
← Torna a TypeScript Academy