[TypeScript] 타입스크립트 유니온 타입(Union Type) - 타입을 2개 이상 허용하자

▶타입스크립트 유니온 타입(Union Type)

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자( || )와 같이 A이거나 B이다 라는 의미의 타입입니다.

 

🔎 유니온 타입이 없어도

function logMessage(value: any) {
  console.log(value);
}
logMessage('hello');
logMessage(100);

logMessage라는 함수에 string값도 넣고 싶고 number값도 넣고 싶을 때 value의 타입을 any로 해도 에러가 발생하지는 않습니다.

다만 이렇게 할 경우 타입스크립트의 장점이 사라지게 되는 것과 마찬가지인데요.

이는 유니온 타입의 장점과도 이어지므로 밑에서 설명을 이어서 하겠습니다.

 

🔎 유니온 타입 사용하기

사용하는 방법은 단순합니다.

( | ) 을 사용하여 허용하고 싶은 타입을 순서대로 하나씩 적어주면 됩니다.

// 기본
var seho: string | number | boolean;

// 함수의 파라미터에서 사용하기
function logMessage1(value: string | number) {
  console.log(value);
}
logMessage1('hello');
logMessage1(100);

 

🔎 유니온 타입의 장점

위에서 any를 사용하여 단순하게 모든 타입을 허용하는 방법을 사용했을 때는

타입스크립트가 그 변수(혹은 파라미터)가 무슨 타입인지를 정확하게 몰라

적용할 수 있는 메소드들을 정확하게 알려주지 못합니다.

즉, 이 부분에 대해서는 개발자들이 부담해야 한다는 말입니다.

thisisError는 제가 그냥 입력한 임의의 메서드입니다.

위와 같이 제가 그냥 존재하지 않는 메서드명에 대해서도 아무 에러가 발생하지 않았습니다.

저번에도 말했지만.... 오탈자 하나로 빨간줄 없이 하루종일 코드만 바라보고 있게 되는 일이 발생할 수도 있습니다...

 

반면에 타입을 유니온 타입으로 지정해 준 경우는

존재하지 않는 메서드에 대해서 에러 발생

string 혹은 number 타입에 적용할 수 있는 메서드들 중에 당연히 thisisError라는 메서드는 없으므로

에러를 발생시키는 것을 알 수 있었습니다.

 

🔎 타입 가드 - if문을 사용하여

타입 가드는 특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정을 말합니다.

function logMessage2(value: string | number) {
  // 타입 가드(특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정)
  if (typeof value === 'number') {
    value.toLocaleString();
  }
  if (typeof value === 'string') {
    value.toString();
  }
  throw new TypeError('value must bo string or number');
}

위처럼 if문을 사용하여 타입의 범위를 좁혀주게 되면

좁힌 범위에 해당하는 메서드들만 보여줄 수 있게 됨

좁힌 타입에 맞는 메서드들을 보여주게 됩니다.

 

🔎 유니온 타입의 특징 - 구조체에 대해서는 공통된 것만

타입스크립트에서는 인터페이스와 같은 구조체를 유니온 타입으로 적용할 경우에는 공통된 속성만을 사용하도록 되어 있습니다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
  someone.name; // 공통 속성만 사용 가능
  someone.skill; // Error
  someone.age; //  Error
}

타입스크립트 입장에서는 someone이 Developer도 되어야 하고 Person도 되어야 하기 때문에

구조체를 유니온 타입으로 적용할 경우에는 공통된 속상만을 사용하도록 하고 있습니다.