!와 as HTMLElement의 차이

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <App />
);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <App />
);

typescript 적용을 하면서 root를 불러오는 과정에서 에러 표시가 나와 자주 고쳤다

그때 해결할 수 있는 방법이 

위 두가지 인데

평소에 !를 주로 사용했는데 ai가 as HtmlElement로 적는게 더 명확하다고 하여 이유를 물어보았다

요약하자면 두 방법 모두 적용되는 것은 비슷한데

as HTMLElement가 이 부분이 HTML Element이다 라는 것을 알려주어

명시적으로 나타내기 때문에 더 좋다고 한다

자세한 설명은 아래에 있다

 

 

 

as HTMLElement와 !는 비슷한 목적으로 사용되지만, 약간의 차이가 있습니다:

 

 

 

• as HTMLElement:

 

 

 

 

• "이 값을 HTMLElement로 취급해 주세요"라고 TypeScript에게 말하는 것입니다.

 

 

 

 

• 개발자가 이 값이 HTMLElement일 것이라고 확신한다는 의미를 나타냅니다.

 

 

2. !

 

 

 

 

• "이 값은 null이나 undefined가 아닙니다"라고 TypeScript에게 말하는 것입니다.

 

 

 

 

• 주로 as HTMLElement의 결과가 null이 아닐 것이라고 확신할 때 사용합니다.

 

 

 

두 방법 모두 개발자가 해당 값의 타입이나 존재 여부를 확신한다는 의미를 나타냅니다. 그러나 as HTMLElement는 더 구체적으로 HTMLElement 타입임을 명시합니다.

 

 

실제로 두 방법 모두 런타임 검사를 수행하지 않으므로, 잘못 사용하면 런타임 오류가 발생할 수 있습니다. 안전한 코드를 위해서는 추가적인 검사가 필요할 수 있습니다.