[TS] 타입 계층과 변환 개념 (업캐스팅, 다운캐스팅, unknown, never)

---

01

타입스크립트에서 타입이란?

타입스크립트에서 타입(Type)이란 값이 가질 수 있는 형태나 범위를 제한하는 것입니다.

예를 들어, 숫자만 들어갈 수 있는 변수를 만들 수도 있고, 글자(문자열)만 들어갈 수 있는 변수를 만들 수도 있어요.

이를 통해 코드의 안정성을 높이고, 버그를 줄일 수 있습니다.

 

1. 타입의 기본 개념

✅ 타입은 비슷한 성질을 가진 여러 개의 값(데이터)을 묶어둔 개념(집합)

✅ 비슷한 속성을 가진 값들을 하나로 묶어 타입을 형성

✅ 예를 들어, 숫자들은 number 타입, 글자들은 string 타입

let num: number = 10;  // 숫자 타입 (10, 20, -5 같은 숫자만 가능)
let str: string = "hello";  // 문자열 타입 ("hello", "world" 같은 글자만 가능)

 

 

2. 리터럴 타입과 타입 관계

✅ 리터럴 타입(Literal Type): 특정한 값만 가질 수 있는 타입

let num: 10 = 10;  // 10이라는 값만 가능! (다른 숫자는 안 됨)
let str: "hello" = "hello";  // "hello"라는 값만 가능!

 

✅ 타입 간 관계 (부모-자식 개념)

타입스크립트에서는 큰 그룹(슈퍼타입)과 작은 그룹(서브타)이 있습니다! 

number 타입은 모든 숫자를 포함하는 큰 그룹 / 10 리터럴 타입은 오직 10만 포함하는 작은 그룹

 

👉 큰 그룹(부모) → 작은 그룹(자식)으로 내려가는 것은 가능해요!

let num1: 10 = 10;  // 10이라는 값만 가능
let num2: number = num1;  // ✅ 가능 (10은 숫자니까!)

 

👉 하지만 작은 그룹(자식) → 큰 그룹(부모)으로 가는 건 안 돼요!

num1 = num2; // ❌ 오류 발생 (number 타입에는 100, 200도 포함될 수 있어서 위험해요!)

 

 

👉 정리해 보자면

✅ 10은 number 타입 안에 포함되니까 10 → number 변환 가능 

❌ number에는 여러 숫자가 있으니까 number → 10 변환 불가능 

 

 

3. 타입 간 계층 관계 (부모-자식 관계)

✅ 큰 그룹(부모)과 작은 그룹(자식)이 있습니다!
✅ number는 모든 숫자를 포함하는 큰 그룹이고, 10은 오직 10만 포함하는 작은 그룹입니다.
✅ 이 관계는 가족(부모-자식) 관계랑 비슷해요!

• 예를 들어, "과일"이라는 큰 그룹 안에 "사과"라는 작은 그룹이 있는 것과 같아요.
• "사과"는 과일이라고 할 수 있지만, 모든 과일이 사과는 아니죠! 🍎🍊🍌

4. 타입 호환성과 변환 (타입 바꾸기)

✅ 작은 그룹 → 큰 그룹으로 바꾸는 건 가능합니다! (업캐스팅) 
❌ 하지만 큰 그룹 → 작은 그룹으로 바꾸는 건 기본적으로 안 됩니다! (다운캐스팅) 

let num3: number = 100;
let num4: 10 = 10;

num3 = num4; //✅ 가능: 업캐스팅

num4 = num3; //❌ error: 다운캐스팅

👉 예를 들어

• "사과는 과일이에요!" 🍎 → 🍏  (작은 그룹 → 큰 그룹 OK!)
• "과일은 사과예요!" 🍏 → 🍎 ❌ (큰 그룹 → 작은 그룹 안 돼요!)

---

02

타입 계층 구조와 기본 타입 쉽게 이해하기

타입계층도

1. 타입 계층 구조란?

👉 타입도 부모-자식 관계가 있다!

• number(숫자 전체) → 10(특정 숫자)
• string(문자 전체) → "hello"(특정 문자열)
• 부모 타입은 더 많은 값을 포함하고, 자식 타입은 특정 값만 포함해요.

✅ 작은 타입(자식) → 큰 타입(부모) 변환 가능 (업캐스팅)
❌ 큰 타입(부모) → 작은 타입(자식) 변환 불가능 (다운캐스팅)

 

2. 업캐스팅과 다운캐스팅

✅ 업캐스팅(Upcasting) → 작은 타입을 큰 타입으로 변환 가능

let 작은숫자: 10 = 10;
let 큰숫자: number = 작은숫자; // 가능 ✅

예를들어 "사과는 과일이다" 🍏 → 🍎 OK!

 

✅ 다운캐스팅(Downcasting) → 큰 타입을 작은 타입으로 변환 불가능

let 큰숫자: number = 100;
let 작은숫자: 10 = 큰숫자; // 오류 ❌

예를 들어 "과일은 사과다"는 안 됨! 🍎 → 🍏 ❌

 

📌 정리: 업캐스팅(Upcasting)과 다운캐스팅(Downcasting)이란?

 

업캐스팅(Upcasting)은 작은 타입(자식 타입)이 더 큰 타입(부모 타입)으로 변하는 것을 말해요.
타입스크립트에서는 이런 변환이 자동으로 허용되며, 별다른 조치 없이 사용할 수 있습니다.
예를 들어, 10이라는 값은 number 타입 안에 포함되기 때문에 10을 number로 변환하는 것은 가능합니다.

 

반대로, 다운캐스팅(Downcasting)은 큰 타입(부모 타입)이 작은 타입(자식 타입)으로 변하는 것을 말합니다.
하지만 이 경우 타입스크립트에서는 기본적으로 허용하지 않아요.
예를 들어, number 타입에는 100, 200 같은 다양한 숫자가 포함될 수 있기 때문에,
어떤 number 값을 특정한 10으로 변환하는 것은 안전하지 않기 때문입니다.

 

즉, 작은 값은 큰 값으로 변환할 수 있지만, 큰 값은 작은 값으로 변환할 수 없습니다!

 

3. unknown 타입 (모든 타입의 부모!)

unknown은 모든 타입을 담을 수 있는 슈퍼 타입입니다. 
unknown 변수에는 숫자, 문자열, 객체, 함수 뭐든지 저장 가능합니다!

let 값: unknown;
값 = 10; // 가능
값 = "hello"; // 가능
값 = true; // 가능

 

❌ 하지만 반대로 unknown 값을 다른 타입으로 변환하는 건 안 됩니다!

let 숫자: number = 값; // 오류 ❌ (unknown → number 변환 안 됨!)

 

4 never 타입 (아무 값도 가질 수 없음!)

never는 아무 값도 가질 수 없는 타입입니다.
📌 무한 루프나 오류를 발생시키는 함수의 반환 타입

function 오류발생(): never {
  throw new Error("이 함수는 끝나지 않아요!");
}

📌 "절대 실행이 끝나지 않는 함수"를 표현할 때 사용합니다!

 

5. void 타입 (아무것도 반환하지 않는 함수)

void는 값을 반환하지 않는 함수의 타입입니다.

function 인사(): void {
  console.log("안녕하세요!");
}

📌 "아무 값도 반환하지 않는 함수"를 표현할 때 사용합니다!

---

03

마무리

타입스크립트에서는 부모-자식 관계가 있으며, 타입 간 변환 규칙을 잘 이해하면 더욱 안전한 코드 작성이 가능합니다!

타입	의미	예제
업캐스팅	작은 타입 → 큰 타입 (가능)	10 → number
다운캐스팅	큰 타입 → 작은 타입 (불가능)	number → 10 ❌
unknown	모든 타입을 포함하는 슈퍼 타입	unknown 값 = 숫자, 문자열, 객체
never	절대 끝나지 않는 함수	throw Error()
void	아무것도 반환하지 않는 함수	function log(): void

 

 

 

 

이미지출처: 한 입 크기로 잘라먹는 타입스크립트(TypeScript)