typescript

[typescript] 유니언 타입

sewonzzang123 2023. 8. 22. 19:45
반응형

 

1. 유니언 타입(union type)

유니언 타입은 여러 개의 타입 중 한 개만 쓰고 싶을 때 사용하는 문법입니다.

function logText(text: string){
	console.log(text);
}

logText('hi'); //hi

아래와 같은 logText라는 함수가 있을 때, 'hi'라는 문자열을 넘겨 호출하면 문제가 없습니다.

그러나 숫자를 출력하고 싶을때는 어떻게 해야 할까요?

이 때 유니언 타입ㄷ을 사용하면 문제를 해결할 수 있습니다.

 

function logText(text: string | number){
	console.log(text);
}

text 파라미터는 문자열과 숫자를 모두 받을 수 있는 유니언 타입으로 선언되었습니다.

자바스크립트 OR 연산자의 |를 이용하여 여러 개의 타입 중 1개를 사용하겠냐고 선언하는 방식이 바로 유니언 타입입니다.

이렇게 되면 logText 함수는 문자열과 숫자 모두 입력받아 콘솔에 출력할 수 있게 됩니다.

 

2. 유니언 타입의 장점

 

1. 유니언 타입을 사용하지 않았을 경우, 타입이 다른 동일한 동작을 하는 함수를 구현하고 싶을 때, 두개의 함수를 만들고 관리해야하는 불편함이 생깁니다.

이럴 때 유니언 타입을 사용해서 같은 동작을 하는 함수의 코드 중복을 줄일 수 있습니다.

 

2. 여러 개의 타입을 받기 위해 any타입을 사용했을 때와 비교해도 더 타입을 정확하게 사용할 수 있습니다.

타입스크립트의 장점은 타입이 정해져 있을 때 자동으로 속성과 API를 자동 완성하는 특성이 있습니다.

위처럼 유니언 타입을 사용하였을 경우, string과 number 모두 제공하는 toString()을 자동완성 할 수 있지만, any타입은 자동완성되지 않습니다.

따라서, any타입으로 선언한 경우에는 toString() 이라는 API스펙을 정확히 몰랐을 때 오탈자가 발생하더라도 에러를 미리 발견하기가 어렵습니다.

이처럼 유니언 타입을 이용해서 중복된 코드를 줄이고 타입을 더 정확히 선언할 수 있습니다. 

유니언 타입을 사용한 logText
유니언 타입을 사용하지 않고 any로 타입을 정의한 logText

 

3. 유니언 타입을 사용할 때 주의할 점

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

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

  function introduce(someone: Person | Developer) {
    console.log(someone);
  }

introduce는 Person 또는 Developer 인터페이스를 받아 콘솔에 출력하는 함수입니다.

 만약, Person 인터페이스의 age속성이나 Developer 인터페이스의 skill 속성을 log로 출력하면 각각 다른 인터페이스에 존재하지 않아 오류가 발생하게 됩니다.

 이처럼 함수의 파라미터에 유니언 타입을 사용하면 함수에 어떤 값이 들어올지 알 수 없기 때문에 가장 안전한 방식으로 타입의 속성과 API를 자동 완성해 줍니다.

 

여기에서 함수 내부에서 파라미터 타입의 종류에 따라 특정 로직을 실행하고 싶다면 다음과 같이 in 연산자를 사용해서 로직을 완성하면 됩니다.

  function introduce(someone: Person | Developer) {
    if ('age' in someone) {
      console.log(someone.age);
      return;
    } else if ('skill' in someone) {
      console.log(someone.skill);
      return;
    }
  }

in 연산자는 객체에 특정 속성이 있는지 확인하는 연산자입니다. 객체에 해당 속성이 있으면 true를 반환하고, 없다면 false를 반환합니다.

someone.age와 someone.skill의 콘솔을 찍는 코드에 마우스를 올려보면, 각각 타입이 올바르게 추론되고 있는 것을 볼 수 있습니다.(Person, Developer)

 

이전에 봤던 logText를 다시 살펴보면, typeof연산자를 사용해서 타입을 묻는 if문을 실행 후, 해당 타입에만 제공하는 함수를 사용할 수 있게 됩니다.

  function logText(text: string | number) {
    if (typeof text === 'string') {
      console.log(text.toLocaleUpperCase());
    }
    if (typeof text === 'number') {
      console.log(text.toLocaleString());
    }
  }

 

이처럼 함수의 파라미터에 유니언 타입을 선언하면 함수 안에서는 두 타입의 공통 속성과 메서드만 자동 완성되는 것을 확인했습니다.

특정 타입의 속성과 메서드를 사용하고 싶다면 typeof 나 in 연산자를 사용하여 타입을 구분한 후 코드를 작성해야 합니다.

 

반응형