0Pricing
TypeScript Academy · Lezione

Pattern pratici con unioni e intersezioni

Applichi unioni e intersezioni in scenari reali.

Pattern pratici con unioni e intersezioni è 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.

Benvenuto

I tipi unione e intersezione sono alla base di molti pattern TypeScript del mondo reale. Questa lezione esplora combinazioni pratiche che utilizzerà nel codice di produzione.

Pattern del payload facoltativo

Modelli funzioni o eventi che possono trasportare dati oppure no utilizzando un'unione.
type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

Builder/Mixin con un'intersezione

Utilizzi le intersezioni per comporre insiemi di funzionalità in un tipo combinato.
type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

Unione per la normalizzazione dell'input

Accetti tipi di input flessibili in una funzione e li normalizzi in un tipo canonico.
function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

Tipi branded con un'intersezione

Crei tipi distinti dallo stesso tipo primitivo utilizzando intersezioni con un marcatore brand univoco.
type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

Pattern WithOptional

Utilizzi un'intersezione con Partial per creare un tipo di base in cui alcuni campi sono obbligatori e altri facoltativi.
type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

Props polimorfe dei componenti

In React, i tipi unione consentono alle props dei componenti di variare in base a un discriminante.
type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

Estensione di tipi di terze parti

Intersechi i tipi di terze parti con le sue aggiunte.
import type { Request } from 'express';
type AuthRequest = Request & { user: User };

Combinazione di unione e intersezione

Le unioni e le intersezioni possono essere combinate. Le parentesi controllano la precedenza.
type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

Type guard per i membri di un'unione

Scriva una funzione type guard riutilizzabile per restringere un'unione senza ripetere i controlli.
function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

Comportamento distributivo nelle intersezioni

Legge distributiva: A & (B | C) = (A & B) | (A & C). TypeScript la applica automaticamente.
type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

Verifica rapida

Quale pattern crea un tipo distinto da `number` per impedire la combinazione accidentale degli ID?

Riepilogo

I tipi unione e intersezione si combinano per modellare strutture complesse del mondo reale: ID branded, comportamenti mixin, input flessibili e props di componenti discriminate. Padroneggi questi pattern per scrivere TypeScript di livello professionale.

Domande Frequenti

La lezione «Pattern pratici con unioni e intersezioni» è gratuita?

Sì — il testo completo di «Pattern pratici con unioni e intersezioni» è 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 «Pattern pratici con unioni e intersezioni»?

Applichi unioni e intersezioni in scenari reali. 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 «Pattern pratici con unioni e intersezioni»?

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. Tipi unione: A o B
  2. Tipi intersezione: A e B
  3. Unioni discriminate per un pattern matching sicuro
  4. Pattern pratici con unioni e intersezioni
← Torna a TypeScript Academy