📘 타입스크립트 개념 정리05

📌 타입 좁히기(Type Narrowing)

1️⃣ 타입 좁히기란?

타입 좁히기(Type Narrowing) 는
여러 타입이 섞여 있는 값(유니온 타입)을
👉 조건문을 통해 더 구체적인 타입으로 줄이는 것

let value: string | number;

이 상태에서는 어떤 타입인지 모르기 때문에
👉 바로 메서드 사용 불가능

value.toUpperCase(); ❌ (string인지 확신 못함)

그래서 조건문으로 타입을 “좁혀야” 한다.

2️⃣ 왜 필요한가?

타입스크립트는 안전하게 코드 실행을 도와준다.

👉 확실하지 않은 타입은 사용 못하게 막는다
👉 그래서 우리가 직접 타입을 확인해줘야 한다

3️⃣ 기본 예제

type Person = {
  name: string;
  age: number;
};

function func(value: number | string | Date | null | Person) {
  if (typeof value === 'number') {
    console.log(value.toFixed());
  } else if (typeof value === 'string') {
    console.log(value.toUpperCase());
  } else if (value instanceof Date) {
    console.log(value.getTime());
  } else if (value && 'age' in value) {
    console.log(`${value.name}은 ${value.age}살 입니다`);
  }
}

4️⃣ 타입 좁히는 방법 4가지 🔥

✅ 1. typeof (기본 타입 체크)

typeof value === 'number'
typeof value === 'string'

👉 사용 가능 타입

• string
• number
• boolean
• undefined
• symbol

👉 특징
가장 기본적인 방법

✅ 2. instanceof (객체 타입 체크)

value instanceof Date

👉 의미
👉 "value가 Date로 만든 객체냐?"

✔ true → Date 타입 확정
✔ false → 아님

👉 사용 예

• Date
• Error
• class 객체

✅ 3. in 연산자 (속성 존재 여부)

'age' in value

👉 의미
👉 "value 안에 age라는 속성이 있냐?"

✔ 있으면 → Person 타입으로 추론

⚠️ 중요 포인트

value && 'age' in value

👉 왜 value && 붙일까?

👉 이유:
value가 null이면 에러 발생하기 때문

null.age ❌ 에러

그래서 반드시 먼저 체크

✅ 4. null 체크 (실무)

if (value !== null)

또는

if (value)

👉 null / undefined 방지용

5️⃣ 타입가드(Type Guard)란?

👉 조건문을 통해 특정 타입만 통과시키는 것

if (typeof value === 'number') {
  // 여기 안에서는 무조건 number
}

👉 즉
👉 "이 타입만 들어오게 막는 필터"

6️⃣ 가장 많이 틀리는 부분 🚨

❌ 실수 1

typeof value === 'object'

👉 문제점
👉 null도 object로 판단됨

typeof null === 'object' // true 😱

👉 해결

value && typeof value === 'object'

❌ 실수 2

value instanceof Person ❌

👉 이유
Person은 "타입"이지 "값"이 아님

👉 해결

'age' in value

❌ 실수 3

value.toUpperCase();

👉 유니온 상태에서 바로 사용 ❌
👉 반드시 타입 좁히기 필요

7️⃣ 한 줄 핵심 요약 🔥

👉 타입 좁히기 = 조건문으로 타입 확정하기

8️⃣ 실무 느낌 예제

function print(value: string | number) {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

9️⃣ 진짜 핵심 패턴 ⭐

typeof value === 'string'
value instanceof Date
value && 'key' in value

👉 이 3개만 기억하면 80% 해결 가능

🔟 마무리

타입 좁히기는
👉 타입스크립트에서 안전하게 코드 짜는 핵심 기술