<aside> 💡 목차

</aside>

1. 타입 단언의 개념

• 개발자가 타입스크립트 컴파일러보다 해당 값의 타입을 더 잘 알고 있음을 명시적으로 선언하는 방법
• 컴파일러에게 "이 변수의 타입을 내가 지정한 타입으로 간주해라"라고 지시
• 타입 체크 과정에서 강제로 타입을 지정하는 것이므로 주의해서 사용

2. as 키워드를 사용하여 타입 단언하기

• 주로 as 키워드를 사용하여 타입 단언

• JSX와 함께 사용될 때 충돌을 피하기 위해 추천되는 방식

• 사용 예제

  let someValue: any = 'this is a string';
  someValue = false;
  // ? someValue를 string으로 단언
  let length: number = (someValue as string).length;
  

3. 실제 프로젝트에서의 타입 단언 사용

• HTML 코드

<aside> ☝ main.ts 파일이란 파일명을 사용한다면 tsc main.ts를 이용하여 main.js 파일로 바꿔줘야 HTML에서 script 태그로 인식할 수 있음

</aside>

3-1) DOM API 사용 시 타입 단언을 활용하여 HTMLElement 조작

• 예제: HTMLButtonElement로 단언하기

// 버튼 요소 가져오기
const button = document.getElementById('myButton');
// button이 null이 아니라고 가정하고 HTMLButtonElement로 단언
if (button) {
  (button as HTMLButtonElement).disabled = true;
}

+) HTML 요소의 타입

<aside> 💡 HTMLElement 타입

각각의 HTML 요소 타입 정의 HTMLInputElement HTMLSelectElement HTMLFormElement HTMLUlElement ... 등이 있다

</aside>