형 변환이 아니다. 타입을 우기는 것이다.

const dom = document.querySelector('#app');

이 경우 dom Element | null 이다. 그러나 우리가 dom 의 타입을 확신할 수 있다면 타입 assertion으로 타입을 우길 수 있다.

const dom = document.querySelector('#app') as HTMLButtonElement;

dom.addEventListener('click', () => {
  console.log('click');
});

문법은 as를 붙인다. assertion을 쓴다는 것은 주의가 필요하다.

또는 이런 식으로 쓸 수 있다.

function test(value: any) {
  (value as string).length;
}

사용 방법

function test(value: any) {
  (value as string).length;
  (<string> value).length;
}

두가지 사용 방법이 있는데 아래 방법은 jsx와도 헷갈릴 수 있기 때문에 as 를 사용하도록 하자.

non-null assertion

const dom = document.querySelector('#app');

dom!.addEventListener('click', () => {
  console.log('click');
});