const [arts, setArts] = useState<obj[]>([]);
interface obj {
author?: string;
download_url?: string;
height?: number;
id?: string;
url?: string;
width?: number;
}
return (
<div>
{arts.length > 0 && !isLoading ? (
{arts.map((el:obj)=>
<div>
<div>데이터 목록</div>
<div>작가 명</div>
<div>{el.author}</div>
</div>)}
) : (
<p>불러온 데이터가 없습니다</p>
)}
</div>
);
};
arts배열을 map메서드로 돌려주는 부분에서 에러가 났었다.
위 코드는 styled-component와 typescript를 같이쓰면 에러가 난다는 글을 주워읽어서 div로만 바꾼 상태다.
overloaded function에서 지정한 매개변수들의 타입 형식과 실제 전달한 인자의 타입 형식이 일치하지 않으면 뜨는 에러이다.
styled-component와 typescript를 같이쓰면 에러가 난다고 하는데 그래서 그런가?
아니었다. 대신 styled-component가 아닌 일반적인 div 태그로 바꿨더니 에러가 바뀌었다.
2322번 관련 구글링을 어제부터 계속 했는데 안나와서 내 머릿속은 ???였다.
arts를 만들 때 useState에 타입도 맞게 지정했다.
react 버전도 바꿔보고 별 짓을 다했는데 흑흑
원인은 arts가 아니었다. 삼항 연산자가 문제였다. 삼항 연산자를 지우니까 arts부분의 밑줄이 사라졌다.
return (
<div>
{arts.length > 0 ? (
arts.map((el: obj) => (
<div>
<div>데이터 목록</div>
<div>작가 명</div>
<div>{el.author}</div>
</div>
))
) : (
<p>불러온 데이터가 없습니다</p>
)}
</div>
);
};
이럴수가 {}
를 잘못 적어서 type error 삽질을 열심히 했었다니!!!!
그래서 에러에 'Element|{data:obj[];"":any;}
이렇게 떴구나 ㅎ..
타입 에러가 일어났지만 타입이 아니라 그냥 jsx문법을 어기는 등 다른 곳에서 에러가 일어나서 타입스크립트가 타입 에러라고 인식할 가능성도 있다는걸 잊지말자