ts-pattern을 활용한 선언적 분기 작성

패턴 매칭

: 함수형 프로그래밍 언어에서 쓰이는 기법으로, 복잡한 조건문 대신 간결한 표현식을 사용해 원하는 데이터를 표현하는 기법

 

 

 

ts-pattern

: 타입스크립트에서 패턴 매칭 기법을 사용하기 위한 라이브러리

: 타입스크립트의 타입 시슽템을 활용해 코드의 안정성과 명확성 개선

 

 

 

상태에 따른 분기 예시

match(fetchState)
  .with({ status: { label: "loading" } }, () => console.log("loading.."))
  .with({ status: { label: "success" } }, ({ data }) =>
    console.log("success! data is ", data)
  )
  .with({ status: { label: "error" } }, ({ message }) =>
    console.error("error: ", message)
  )
  .otherwise(() => console.error("other status"));

: switch-case 문과 비슷한 방식으로 사용

 

// 4가지 상태와 4가지 이벤트에 대한 타입
type State =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: string }
  | { status: 'error'; error: Error };

type Event =
  | { type: 'fetch' } // 상태가 `loading` 이 아닌 모든 상태 → `loading` 으로 변화
  | { type: 'success'; data: string } // 상태가 `loading` → `success` 로 변화
  | { type: 'error'; error: Error } // 상태가 `loading` → `error` 로 변화
  | { type: 'cancel' }; // 상태가 `loading` → `idle` 로 변화

// ts-pattern을 활용한 예시
import { match, P } from 'ts-pattern';

const reducer = (state: State, event: Event): State =>
  match<[State, Event], State>([state, event])
    .with(
      [{ status: 'loading' }, { type: 'success' }],
      ([, event]) => ({ status: 'success', data: event.data })
    )
    .with(
      [{ status: 'loading' }, { type: 'error', error: P.select() }],
      (error) => ({status: 'error', error })
    )
    .with(
      [{ status: P.not('loading') }, { type: 'fetch' }],
      () => ({ status: 'loading' })
    )
    .with(
      [{ status: 'loading' }, { type: 'cancel' }],
      () => ({ status: 'idle' })
    )
    .with(P._, () => state)
    .exhaustive();

reducer({ status: 'idle' }, { type: 'fetch' }); // { status: 'loading' }

 

 

 

 

 

 

 

Reference

타입스크립트와 ts-pattern을 활용한 선언적 분기 작성