Skip to content

타입 단언 (Type Assertion)

  • 타입 단언이란, 개발자가 직접 컴파일러에게 변수나 객체의 타입을 알려주는 방식이다.
  • 즉, TypeScript의 타입 추론보다 개발자의 판단을 우선시하는 것이다.
  • 컴파일러가 타입을 정확히 추론할 수 없는 상황에서, 개발자가 더 많은 정보를 알고 있을 때 사용한다.

1. 문법

ts
표현식 as 지정할 타입
  • as 키워드를 사용해 특정 타입으로 단언할 수 있다.
  • 과거에는 <타입> 문법도 있었지만, JSX와 혼동되므로 현재는 as 문법을 권장한다.

2. 예시: unknown 타입 단언

ts
// unknown 타입 변수 선언
const someValue: unknown = "Hey there";
// someValue는 unknown 타입이므로, 어떤 속성에도 바로 접근 불가

// 오류 발생: .length는 string, array에서만 사용 가능
const len = someValue.length; // Error:

// 타입 단언으로 해결
const len = (someValue as string).length; // OK
console.log(len); // 9
  • unknownany와 달리 안전한 최상위 타입이다.
  • 타입을 명시적으로 좁히거나 단언하지 않으면 사용할 수 없다.
    → “이건 string이야”라고 개발자가 직접 알려주는 것이 as의 역할이다.

3. 예시: DOM 요소 타입 단언

document.getElementById()는 반환 타입이 항상 HTMLElement | null이기 때문에,
구체적인 타입의 속성(value, disabled 등)에 바로 접근할 수 없다.

ts
// 기본 형태: 타입 단언 없이 접근
const button = document.getElementById("buttons");

// Error: HTMLElement에는 disabled 속성이 없음
button.disabled = false;

ts
// 타입 단언으로 구체적인 타입 지정
const button = document.getElementById("buttons") as HTMLButtonElement;

// OK: HTMLButtonElement에는 disabled 속성이 존재
button.disabled = false;

ts
// 타입 가드로 안전하게 접근하기
const button = document.getElementById("buttons");

// 타입이 HTMLButtonElement로 좁혀짐
if (button instanceof HTMLButtonElement) {
  button.disabled = false;
}

if (button) {
  // button이 null이 아님을 보장
  button.classList.add("active");
}
  • as를 사용하지 않고도 instanceofnull 체크를 통해 타입을 안전하게 좁힐 수 있다.
  • 하지만 개발자가 타입을 확실히 알고 있는 상황이라면 as 단언이 더 간결하다.