타입 단언 (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
unknown
은any
와 달리 안전한 최상위 타입이다.- 타입을 명시적으로 좁히거나 단언하지 않으면 사용할 수 없다.
→ “이건 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
를 사용하지 않고도instanceof
나null
체크를 통해 타입을 안전하게 좁힐 수 있다.- 하지만 개발자가 타입을 확실히 알고 있는 상황이라면
as
단언이 더 간결하다.