4:00 let c에 할당되는 type이 다르게 나옵니다.

Question

let c: StringNumberSwitch<string | number>   제가 이렇게 작성을 했는데요 선생님의 말씀대로라면 string 이 먼저 StringNumberSwitch 를 통해서 number 타입이 되고, number 타입이 다음으로 들어가서 string 타입이 되어 최종적인 c의 타입은 number | stinrg 이어야 하는 게 맞지 않나요? 저는 사진과 같이 string | number 이렇게 나옵니다. 이렇게 순서를 바꿔봐도 똑같이 나옵니다.

효빈 Hyobin · Answer

안녕하세요 🙂 정환 강사님이 휴가중이셔서, 제가 대신 답변드립니다. let c: StringNumberSwitch; 이 코드를 보면, StringNumberSwtich , StringNumberSwtich 순서로 동작해서 결국 변수 c의 타입은 number | string 이 되야 할 것처럼 보이는데요, 아무리 순서를 바꿔봐도 변수 c의 타입이 string | number 로 나오는 이유는, 타입스크립트에서 number | string 과 string | number 는 결국 같은 타입이고, 타입스크립트나 에디터가 타입을 표시할 때 내부적으로 정해진 순서를 따라 표시해주기 때문입니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. heedda.kollim님이 언급하신 문제는 StringNumberSwitch 제네릭 타입이 사용되는 방식에 관련된 내용입니다. 먼저 StringNumberSwitch 타입이 어떻게 작동하는지 이해하는 것이 중요합니다. StringNumberSwitch 타입은 다음과 같은 논리를 가집니다: 조건부 타입 : type StringNumberSwitch = [T] extends [number] ? string : number; 이는 T 가 number 에 할당될 수 있는 경우에는 string 을 반환하고, 그렇지 않으면 number 를 반환합니다. 그러나 주어진 let c: StringNumberSwitch; 의 경우, TypeScript는 합집합(union) 타입인 string | number 에 대해서 타입을 평가하며, 분산(distribution)하지 않습니다. 즉, StringNumberSwitch 는 전체로 평가되어, 결국 항상 number | string 타입으로 결과가 나옵니다. 이는 TypeScript의 조건부 타입이 합집합 타입에 다르게 작용하기 때문입니다. 각각의 경우 각각 독립적으로 평가되는 대신에 범위 전체가 한 번에 평가됩니다. 그래서 string | number 모두 커버하기 위해 number | string 타입이 지정됩니다. 관련된 다른 설명 자료나 비슷한 예제에 대해 학습하고 싶으시다면 다음 링크들을 참조하시면 도움이 될 것 같습니다: 타입스크립트 조건부 타입 이해하기 타입스크립트의 분산 조건부 타입 사용하기 이 부분을 참고하시어 해당 타입이 어떻게 작동하는지 더 깊게 이해하시기를 권장드립니다. 추가적인 질문이나 상세한 설명이 필요하면 언제든지 문의해 주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.