진정한 타입스크립트의 시작, Union 타입

유니온 타입은 타입스크립트에서 코딩할 때 굉장히 많이 쓰게 될 것이다.

OR 또는 합집합으로 이해하면 충분할 것이다.

type Direction = "left" | "right" | "up" | "down";
function move(direction: Direction) {
  console.log(direction);
}

환상적인 자동 완성!

type TileSize = 8 | 16 | 32;
const tileA: TileSize = 16;
//const tileB: TileSize = 10; //10 형식은 TileSize 형식에 할당할 수 없습니다.

 

<활용 예제>

//function : login -> success, fail

type SuccessState = {
  response: {
    body: string;
  };
};

type FailState = {
  reason: string;
};

function login(): SuccessState | FailState {
  return {
    response: {
      body: "logged in!",
    },
  };
}

한단계 더 리펙토링

type SuccessState = {
  response: {
    body: string;
  };
};

type FailState = {
  reason: string;
};

type LoginState = SuccessState | FailState;

function login(): LoginState {
  return {
    response: {
      body: "logged in!",
    },
  };
}

 

실무 스타일로 가면 이제 프라미스 도입!

function login(id: string, password: string): Promise<LoginState> {
/.../
  };
}

 

 

<연습> for...in과 함께 써보기

type SuccessState = {
  response: {
    body: string;
  };
};

type FailState = {
  reason: string;
};

type LoginState = SuccessState | FailState;


function printLoginState(state: LoginState) {
  if ("response" in state) {
    console.log(`🎉 ${state.response.body}`);
  } else {
    console.log(`😭 ${state.reason}`);
  }
}
let 입장: SuccessState = {
  response: {
    body: "입장완료!",
  },
};

printLoginState(입장); //🎉 입장완료!

위 예제는 사실 괜찮은 스타일은 아니므로

Discriminated Union 을 더 추천