React 개발시 index.tsx에서 Error 발생 해결(TypeScript사용)

React에서 typescript로 개발하는데 아래의 에러가 발생했다.

const root = ReactDOM.createRoot(document.getElementById("root"));

 

에러 내용은 아래와 같았다.

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'.
  Type 'null' is not assignable to type 'Element | DocumentFragment'.

Visual Studio Code에서 에러를 보이고 있는 화면

 

해결 방법은 간단했다. getElementById를 통해 받아오는 객체의 Type을 지정해주면 된다. TypeScript가 데이터 타입을 알아볼 수 있도록 해주는 것. 수정된 코드는 아래와 같고, 핵심은 as HTMLElement 다.

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

 

다음 개발을 하러 다시 돌아가보겠다. 그럼 20000