[ERROR] JSX element implicitly has type 'any' because no interface 'JSX.Intrinsi

문제상황

vscode에서 typeScript 코드를 불러왔더니 전체적으로 빨간줄이 뜨면서 다음과 같은 에러메시지가 나타났다.

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

 
JSX 요소가 any 타입으로 간주되어, 'JSX.IntrinsicElements'라는 인터페이스가 정의되지 않아 정확한 타입을 알 수 없다는 뜻이다.
 
 

 

발생이유

타입스크립트에서 JSX를 사용하려면 JSX를 이해할 수 있는 React 타입 정의 파일이 있어야 하는데, React 타입이 설치되어 있지 않거나 누락된 경우, JSX가 뭔지 몰라서 나타나는 에러라고 한다. 참고로 JSX.IntrinsicElements는 <div>나 <span>처럼 기본 HTML 태그들의 타입 정의를 담고 있는데, 이 인터페이스는 @types/react 패키지 안에 들어있다.
 
 

해결

npm install --save-dev @types/react@latest @types/react-dom@latest
npm install react@latest react-dom@latest

 

• @types/react : React 타입 정의 파일로, 타입스크립트가 JSX와 React 컴포넌트를 이해할 수 있게 해준다.
• @types/react-dom : ReactDOM 관련 기능의 타입 정의 파일이다.
• --save-dev : 개발 시에만 필요한 패키지로 설치하겠다는 뜻이다.
• react@latest react-dom@latest : 타입 정의 파일 버전과 실제 React 버전이 맞지 않으면 충돌이 발생하므로 react 라이브러리 자체를 최신 버전으로 설치해준다.

 

이렇게 @types/react 설치를 함으로써 JSX.IntrinsicElements 인터페이스가 프로젝트 내에 존재 -> 타입스크립트가 JSX 코드 타입 추론 가능 -> react 최신 버전과 타입 정의가 일치하므로 버전 충돌 없이 정상 인식하게 됐다.
 
tsconfig.json에서 "jsx" : "react" 또는 "react-jsx" 설정을 확인해보는 것도 좋을 것 같다.

참고

• JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.