TIL 52 | TypeScript - Type assertions

✌Type assertions

타입 형 변환(Type assertions)은 TypeScript가 직접 감지하지 못하는 특정의 값을 TypeScript에 알려주는 역할을 한다.

1. <>

아래의 예제를 보면 userInputBefore 변수는, document.getElementById사용하면 특정 HTML 요소인지 TypeScript가 모르기 때문에 HTMLElement 타입을 가진다.

userInputAfter 변수는 에서 <> 기호를 사용하여 요소 타입을 알려주면, <input type="text"> 요소의 value 속성을 사용할 수 있다.

// ☠️ before
const userInputBefore = document.getElementById('user-input');
userInputBefore.value ='user'; // HTMLElement는 value 속성이 없으므로 오류

// ✨ after
const userInputAfter = <HTMLInputElement> document.getElementById('user-input');
userInputAfter.value = 'viva';

2. as

as는 타입 단언(type assertion)의 경우에 쓰이는데, 타입 단언 TypeScript 컴파일러가 타입을 실제 런타임에 존재할 변수의 타입과 다르게 추론하거나 또는 보수적으로 추론하는 경우 개발자 수동으로 컴파일러한테 특정 변수에 대해 힌트를 줄 때 사용한다.

// ☠️ before
const userInputBefore = document.getElementById('user-input');
userInputBefore.value ='user'; // HTMLElement는 value 속성이 없으므로 오류

// ✨ after
const userInputAfter = document.getElementById('user-input') as HTMLInputElement;
userInputAfter.value = 'viva';

Reference

타입스크립트 핸드북 →(SITE)