Discriminated union으로 form state 표현하기

목적

form의 idle, submitting, success, error 상태를 type으로 안전하게 표현합니다.

예시

type FormState =
  | {status: 'idle'}
  | {status: 'submitting'}
  | {status: 'success'; message: string}
  | {status: 'error'; errorMessage: string};

function getSubmitLabel(state: FormState) {
  switch (state.status) {
    case 'idle':
      return 'Submit';
    case 'submitting':
      return 'Submitting...';
    case 'success':
      return state.message;
    case 'error':
      return state.errorMessage;
  }
}

면접 연결

union type과 narrowing을 설명할 때 사용할 수 있습니다.