(에러 해결) Union type과 타입 가드 함께 사용하기

Union type

| 연산자로 여러 개의 타입이 연결된 타입을 의미한다. 이때 | 연산자는 or의 의미를 가지고 있다. 이러한 Union type을 활용해 인터페이스를 정의하고자 했다.

문제 정의

interface Props {
  data: LectureRoomsPerBuilding | LectureRoomInfo;
  children?: LectureRoomInfo[];
}

다음과 같이 인터페이스를 작성했는데, 타입 추론에서 문제가 발생했다.

export interface LectureRoomInfo {
  room_name: string;
  room_uid: RoomUID;
}

export interface LectureRoomsPerBuilding {
  building_name: string;
  building_uid: number;
  rooms: LectureRoomInfo[];
}

에러가 발생한 코드는 data.room_name data.building_name 이었다. "LectureRoomsPerBuilding은 room_name 프로퍼티를 포함하지 않는다." "LectureRoomInfo는 building_name 프로퍼티를 포함하지 않는다." 라는 에러 메시지를 확인할 수 있었다. or을 의미하는 | 연산자로 두 타입을 연결 했으니 두 인터페이스의 프로퍼티들을 모두 사용할 수 있을거라 생각했는데 내 예상이 틀렸었다.

Union Type에 대해 구글링한 결과 이와 관련된 자료를 찾을 수 있었다.

Union Type 사용 시 주의점

https://joshua1988.github.io/ts/guide/operator.html#intersection-type

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: string;
}
function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // X 타입 오류
  someone.skill; // X 타입 오류
}

타입스크립트 입장에서는 introduce 함수 실행 시 인자로 Person이 올 지, Developer가 올 지 알 수 없다. 따라서 둘 중 어느 타입이 와도 오류가 나지 않는 방향으로 타입을 추론한다. 가령 인자로 Developer 타입이 온다면 someone.age 라는 코드는 에러를 발생시키기 때문에 타입스크립트가 미리 에러를 띄우는 것이다.

타입 가드

이를 해결하기 위해선 타입 가드를 이용해야 한다.

타입가드란? 함수 내에서 조건문을 사용해 타입을 좁히는 것

function Hello(user: string|number){
  if (typeof user === 'string'){
    // 타입을 string으로 좁힌다
    console.log(`Hello ${user}`);
  }
  console.log(`Hello ${users[user]}`);
}

크게 두 가지 방법이 있다.

• typeof: 원시 자료형만 구분할 수 있다.
• in: 객체에 특정 프로퍼티가 존재하는지를 확인함으로써 타입을 좁힌다.

나는 LectureRoomInfo와 LectureRoomsPerBuilding을 구분해야 했기 때문에, 두번째 방법을 사용했다.

타입 가드를 적용한 함수

  const updateLectureRoomChoice = () => {
    if ('room_name' in data) {
      setLectureRoomChoice({
        building_uid: data.building_uid,
        room_uid: data.room_uid,
      });
    }
  };

props data에 room_name 프로퍼티가 존재한다 == data가 LectureRoomInfo 타입이다. == 서브메뉴에 해당한다.

 

저번 글에서는 메인메뉴와 서브메뉴를 children props의 여부로 구분했었는데, 이렇게 타입 가드를 활용해 구분할 수도 있었다. 다만 타입 가드의 경우 jsx에서 곧바로 사용할 수 없으므로 UI에서는 children props을, 함수 내에서는 타입 가드를 사용하는 방식을 택해야겠다.

 

위 예시처럼 data의 프로퍼티에 접근하는 함수들에 모두 타입 가드를 적용해 줬더니 에러가 해결되었다!