[TIL] 2023.06.27 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다

'{ img: StaticImageData; category: string; title: string; }' 형식은 'CardType' 형식에 할당할 수 없습니다.
'img' 속성의 형식이 호환되지 않습니다.
'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322)

import 한 jpg 파일의 타입을 지정하는 과정에서 상단의 error가 발생했다.

 

type CardType = {
  img: string;
  category: string;
  title: string;
};

type CardProps = {
  CardInfo: CardType;
};

전달받은 props의 `type` 구조는 다음과 같다. CardType의 `img: string`에서 error가 발생한 것.

 

그래서 img의 타입을 `StaticImageData`로 변경했는데 또다시 이름을 찾을 수 없다는 error가 발생한다.

 

import Image, { StaticImageData } from 'next/image';

검색 결과 `StaticImageData`는 'next/image'에서 별도로 import를 해야 한다는 것을 알게 됐다. 이렇게 import를 한 후에 상단의 캡처 이미지와 같이 `img: StaticImageData`로 수정하면 더 이상 error가 발생하지 않는다.

 

참고 문서

https://bomango.tistory.com/84

 

---

'JSX.IntrinsicElements' 형식에 'filmsModal' 속성이 없습니다.ts

오늘 만났던 또 하나의 error 메시지. 컴포넌트명이 대문자가 아닌 소문자로 시작하는 경우에 발생한다. 컴포넌트명은 대문자로 시작해야 한다는 점을 명심할 것!

 

사용자 정의 컴포넌트는 반드시 대문자로 시작해야 합니다. Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달됩니다. <Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일 되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킵니다.

 

참고 문서

https://ko.legacy.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

https://velog.io/@dear/JSX.IntrinsicElements-형식에-속성이-없습니다