[Typescript] 'HTMLElement | null' 형식은 'HTMLElement' 형식에 할당할 수 없습니다.

🤔 문제 상황

getElementById로 돔 요소에 접근해서 변수에 할당하려는데 에러가 떴다.
해당 요소가 제대로 읽히지 않아 HTMLElement 타입으로 할당이 불가능한 것이다.
조건을 붙여 null이 아님을 확인하고 할당할 수 있지만 보다 간편한 방법이 있다.

✅ 해결 방법

1. 연산자 ! 붙이기

const portalDiv = document.getElementById('your-element')!;

타입스크립트에서 !은 Null이 아닌 어선셜 연산자(Non-null assertion operator),
피연산자가 null이 아니라고 컴파일러에게 전달하여
일시적으로 null 제약조건을 완화하는 역할을 한다.
그래서 위 코드에 느낌표를 붙여주면 값이 무조건 할당되어 있다고,
null일 가능성이 없음을 전달하여 에러가 사라진다.

2. as HtmlElemnt 붙이기

const portalDiv = document.getElementById('your-element') as HtmlElement;

type Assertion(타입 단언)을 사용하는 방법이다.
작성자가 TS보다 값의 타입을 정확하게 알고 있을 때 사용할 수 있으며
끝에 as {Type}을 붙여주면 된다.
이 방법은 다소 보수적으로 적용되니 주의해야한다.

---

참고

스택오버플로우