[TypeScript] 타입단언 vs 타입가드

1. 타입 단언 (Type Assertion)

• 개발자가 타입스크립트에게 🗣️ "이 값의 타입은 내가 더 잘 앎"이라고 알리는 기능 ⇒ 타입스크립트 컴파일러는 이를 무조건 신뢰하고 따름
  
• 사용목적: 타입스크립트가 타입을 추론하지 못하거나, 명확히 타입을 지정해야 하는 상황에서 사용
• TypeScript 문법
  1. <> 문법 (거의 미사용) JSX 환경에서 React의 태그 문법과 충돌 가능
  2. as 문법 (주로 사용)

let value: string = "hi";

// 방법 1: <>
(<string>value).toUpperCase();

// 방법 2: as
(value as string).toUpperCase();

⚠️ 주의

• 남용하면 컴파일러가 잘못된 타입 단언을 무시해 TypeScript의 장점(타입 안전성)이 사라질 수 있음
• 타입 단언으로 발생하는 모든 에러는 개발자의 책임

타입 단언 사용예

• DOM 요소 접근

  • 타입스크립트는 DOM 요소의 타입을 명확히 추론하지 못하는 경우가 있음. 이런 경우, 타입을 정확히 명시해서 에러 해결

    const button = document.getElementById("button");
    
    // 에러 발생: 'null'일 가능성 있음
    // button.click();
    
    // 해결 방법 1: 타입 단언 사용 (as)
    (button as HTMLElement).click();
    
    // 해결 방법 2: 타입 단언 사용 (<>)
    (<HTMLElement>button).click(); // ✅ 타입을 명시하여 에러 해결

    HTMLElement

    : 버튼과 같은 HTML 요소를 표현하는 타입스크립트의 기본 타입

• API 응답 데이터

  서버로부터 받은 데이터의 타입 지정 시 사용. 타입스크립트는 서버에서 어떤 JSON이 반환될지 알지 못해 response.json()의 타입이 Promise로 타입추론됨. 타입 단언을 사용하면 명확한 타입을 지정하여 자동완성과 타입 체크 가능

  type User = { id: number; name: string };
  
  const response = await fetch("/api/user");
  const userData = (await response.json()) as User; // Promise<any>를 User 타입으로 단언
  console.log(userData.name);

2. 타입 가드 (Type Guard)

• 정의: 조건문을 통해 값의 타입을 확인하고 좁히는 기능
• 주요 특징:
  • TypeScript와 JavaScript 모두에서 사용 가능
  • 조건문 안에서만 타입이 보장
  • typeof, instanceof 등을 활용
• 예시
  • typeof를 사용하여 unknown 타입을 string으로 좁히는 예제

let value: unknown = "hi";
if (typeof value === "string") {
  console.log(value.toUpperCase()); // HI
}

3. 타입 단언과 타입 가드 비교

특성	타입 단언	타입 가드
언어	TypeScript 전용	TypeScript와 JavaScript 모두 사용 가능
역할	개발자가 직접 타입 선언	조건문으로 런타임에 타입 확인 및 좁힘
타입 안전성	잘못된 단언 시 안전성 상실	조건을 통해 타입이 안전하게 좁힘
사용 시점	컴파일 시(정적)	런타임 시(동적)
주요 문법	as 키워드 또는 <> 기호	typeof, instanceof 등의 연산자

요약

• 타입 단언: 컴파일러가 타입을 추론하지 못하는 상황에서 개발자가 직접 타입을 선언. 신중한 사용 필요
• 타입 가드: 조건문으로 타입을 확인하고 안전하게 좁히는 기능. 타입 안정성을 보장해 선호