Unie rozróżnialne

Unie obiektów ze wspólnym polem-etykietą, które pozwala łatwo odróżnić warianty.

Na tej stronie

Przykład

#
TypeScript
type RequestState =
  | { status: 'loading' }
  | { status: 'success'; data: string[] }
  | { status: 'error'; message: string }

function render(state: RequestState): string {
  switch (state.status) {
    case 'loading':
      return 'Ładowanie…'
    case 'success':
      return `Kursy: ${state.data.join(', ')}`
    case 'error':
      return `Błąd: ${state.message}`
  }
}

console.log(render({ status: 'loading' }))
console.log(render({ status: 'success', data: ['HTML', 'CSS'] }))
console.log(render({ status: 'error', message: 'Brak połączenia' }))
Wynik
Ładowanie…
Kursy: HTML, CSS
Błąd: Brak połączenia

Definicja i zastosowanie

#

Unia rozróżnialna to unia typów obiektów, w których każdy wariant ma wspólne pole z innym literałem, na przykład type: "text" | "image". To pole działa jak etykieta.

Po sprawdzeniu etykiety (if (block.type === "image") albo switch) kompilator dokładnie wie, z którym wariantem ma do czynienia, i udostępnia jego pola.

To podstawowy wzorzec do modelowania stanów (ładowanie, sukces, błąd), zdarzeń, wiadomości czy typów zadań. W połączeniu z never w gałęzi default daje sprawdzanie kompletności.

Składnia

#
Składnia
type A = { kind: "a"; … }
type B = { kind: "b"; … }
type Unia = A | B

Dobre praktyki

#
  • Modeluj stan jako unię rozróżnialną zamiast kilku luźnych flag (isLoading, error, data). Niemożliwe kombinacje przestają być możliwe.
  • Dodaj gałąź default z assertNever, żeby kompilator ostrzegał o nieobsłużonych wariantach.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.