minstudio

DOM 조작과 타입 단언

타입스크립트는 브라우저의 HTML 구조를 직접 들여다볼 수 없으므로, document.querySelector로 가져온 태그가 `div`인지 `input`인지 알 수 없습니다. 이럴 때는 안전을 위해 as HTMLInputElement 처럼 개발자가 직접 태그의 정체를 보증해 주어야 합니다.

📦 정체불명 DOM 상자에 강제 라벨 붙이기 const myInput = document.querySelector('.my-class') as HTMLInputElement; "코드 눈으로 봐서 아는데, 이거 무조건 Input 박스야! 그러니까 .value 속성 자동완성 띄워줘!" 브라우저 환경을 알 수 없는 TS 컴파일러에게 개발자가 직접 DOM 요소의 타입을 보증해주는 수단 
<!-- HTML -->
<input id="user-name" type="text">

<script>
// TS는 document.getElementById가 뭔지 모르기 때문에 무조건 HTMLElement 객체일 것이라 추측합니다.
// 하지만 value 속성에 접근하려면 이것이 완벽한 HTMLInputElement임을 "단언"해야 합니다.
const inputEl = document.getElementById("user-name") as HTMLInputElement;

// 이제 TS도 inputEl이 인풋 박스라는 걸 알아서 value 속성 자동완성을 띄워줍니다!
inputEl.value = "Minstudio";
</script>
DOM 조작과 타입 단언 | Minstudio