최근에 너무 바빠서 블로그를 10일 정도 못 썼다... 😭
그래서 다시 마음 다잡고! 앞으로는 늦어도 7일 안에는 꼭 하나씩 정리하자!!
오늘은 TypeScript의 타입 계층도에 대해 알아보려고 한다.
이 개념을 이해하면 타입 호환성과 업/다운 캐스팅 개념도 자연스럽게 따라온다!
TypeScript에서 "타입"이란 사실 여러 개의 값을 포함하는 '집합(Set)'이다.
즉, 하나의 타입은 동일한 속성을 가진 여러 값을 그룹으로 묶은 것이다.
예를 들어, number 타입은 다음과 같은 값들을 포함한다.
-20, Infinity, 1, 0, 123, 0.1, NaN 등...그렇다면 오직 하나의 값만 포함하는 타입, 즉 리터럴 타입은 어떤 집합일까?
let num: 20 = 20;
위처럼 20이라는 Number Literal 타입은 딱 하나의 값만 포함한다.
하지만 이 값 20은 number 타입에도 속하므로, 결국 20은 number 타입의 부분 집합이라고 할 수 있다.
✅ 정리하면!
number는 큰 집합 (슈퍼 타입)20은 작은 집합 (서브 타입)
이처럼 TypeScript의 타입들은 서로 포함/포함되는 관계를 갖고,
이를 계층 구조(Hierarchy) 라고 부른다.

이제 타입 계층을 이해했으니, 타입 호환성도 쉽게 이해할 수 있다.
📌 타입 호환성이란?
- A 타입의 값을 B 타입으로 사용할 수 있는지 판단하는 개념
- A 타입이 B 타입으로 취급될 수 있다면 "호환된다"고 한다.!
number 타입 ← number 리터럴 타입 (호환됨)
number 타입 → number 리터럴 타입 (호환 안됨)
정사각형과 직사각형의 관계와 비슷하다. 정사각형을 직사각형으로 취급하는 것은 괜찮지만, 직사각형을 정사각형으로 취급하는건 안되는 것 처럼 더 작은 타입의 값을 더 큰 타입의 값으로 취급하는건 상관없지만 반대로는 안되는것이다!
코드로 알아보면...
let num1: number = 10;
let num2: 10 = 10;
num1 = num2;
// 안되는 코드
num2 = num1;
이때 num1 에 num2 의 값을 저장하는건 가능하다. 변수 num1 의 타입이 더 큰 타입이기 때문이다. 하지만 반대로는 안된다.
그리고 서브 타입의 값을 슈퍼 타입의 값으로 취급하는 것을 업 캐스팅, 반대로는 다운 캐스팅이라고 부른다.
쉽게 정리하면 업 캐스팅은 모든 상황에 가능하지만, 다운 캐스팅은 대부분의 상황에 불가능하다고 할 수 있다.
| 개념 | 설명 | 예시 |
|---|---|---|
| 업 캐스팅(Upcasting) | 서브 타입-> 슈퍼 타입 | 10: 10 -> number |
| 다운 캐스팅(Downcasting) | 슈퍼 타입-> 서브 타입 | number -> 10: 10 |
오늘은 TypeScript의 타입 계층도와 타입 호환성에 대해 알아봤다.
20은 number의 부분 집합타입 계층 구조를 잘 이해하면 실전 코드 작성 시 오류를 쉽게 이해하고 디버깅할 수 있다!!
다음엔 이 계층도 기반으로 한 더 복잡한 타입 구조도 정리해보도록 한다!