유니온 사용 이유가 헷갈려요 ㅠㅜ

Question

typescript 입문하기가 너무 어려웠는데 선생님 덕분에 차츰차츰 배우고 있는 학생이에요!

인터페이스 Developer와 Person의 공통 멤버인 name만 사용할 수 있다고 하셨는데

유니온을 왜 사용하는건지 감이 잘 안와요.. name 하나만 사용할거면 타입을 하나만 정해도 되는거 아닌가요? 보통 뭘 할때 많이 사용 되는 개념인지 예시 하나만 들어주실 수 있으신가요?? ㅠㅜㅠ

// 특징: 모든 타입의 공통적인 멤버에만 접근 가능
interface Developer {
    name: string,
    skill: string
}

interface Person {
    name: string,
    age: number
}

function askSomeone(someone: Developer | Person) {
    someone.name
}

Answer

안녕하세요 코딩왕 챡씨님, 예나님, 좋은 질문해 주셨네요 :) 저도 처음 유니온 타입과 인터섹션 타입을 접했을 때 타입 추론 관점에서 헷갈리는 부분들이 많았어요. 지금은 타입스크립트가 많이 편해진 상황에서 유니온 타입을 바라보면 참 좋은 문법이구나 라는 생각이 많이 듭니다 :)

유니온 타입의 가장 큰 장점이자 실제로 많이 활용되는 사례는 아래와 같이 하나의 변수에 여러 개의 타입을 정의하고 싶은 경우입니다.

type ProjectId = string | number;

var newProjectId: ProjectId = 100;
var oldProjectId: ProjectId = '100';

위 코드에서 사용한 type은 타입 별칭이라고 하는건데 강의 뒤쪽에 소개가 되어 있어요. 첫 번째 줄에서 ProjectId라는 타입을 정의하는데 그 타입은 유니온 타입을 이용해서 string과 number를 모두 받을 수 있게 정의하였습니다.

그리고나서 아래 코드를 보시면 newProjectId와 oldProjectId에 첫 번째 줄에서 정의한 ProjectId 타입을 지정했어요. 그래서 newProjectId에서는 숫자를 정의할 수 있고 oldProjectId는 문자를 정의할 수 있습니다. 위와 같은 상황이 실제 서비스 구현하실 때 많이 마주하시게 될텐데요. 자바스크립트는 타입이 없다보니 숫자로 취급하던 값을 무의식적으로 문자로 변환하실 수도 있습니다. 경우에 따라서는 내가 의도하지 않게 타입이 바뀌었더라도 애플리케이션 실행에는 영향이 없을 수도 있는데 가끔은 크리티컬한 에러가 발생할 수 있습니다. 그래서 좀 더 명시적으로 에러가 나지 않는 방향으로 코딩을 하자고 하는게 바로 코드에 타입을 추가해서 개발자의 의도를 한번 더 파악해보자. 이런 느낌이라고 보시면 좋을 것 같아요 :)

Answer

저도 이거 궁금했습니다!

김 코딩왕 김챡씨

유니온 사용 이유가 헷갈려요 ㅠㅜ

이 글과 비슷한 Q&A

리액트 네이티브 스타일 라이브러리 사용에 대한 궁금증입니다.

영상 재생은 되는데 영상이 안보입니다

useEffect 의존성 질문

@react-navigation/drawer 접근 에러