React를 쓰다가 생긴 No overload matches this call error in TypeScript

간략하게 			😡에러  🤪실패  🙉성공

const IMG = styled.div`
	background-image: url(props => props.bgimage😡);
`;

...
<IMG bgimage😡={...}>...</IMG>

 

bgimage에서 에러가 발생했다.

 

처음에는 파일 확장자를 그냥 자바스크립트로 바꾸면 에러가 그냥 넘어갔다.

 

적절한 타입을 안 줘서 생긴 에러라고 생각하고 bgimage 뒤에 any 타입을 줘보려고 했는데 잘되지 않았다.

 

 

 

해결방법은 interface!!

interface IMGTYPE {
	bgimage: any
};

하지만 경험이 많이 없어서 이걸 어떻게 넣어줘야 될지 고민을 많이 했다.

 

 

 

첫 번째와 두 번째 방법은 실패했다.

1번 function쪽에 넣어보기
//////////////////////////////////////////////////
interface IMGTYPE {
	bgimage: any
};

const IMG = styled.div`
	background-image: url(props => props.bgimage😡);
`;

function ...():IMGTYPE🤪 {
...
<IMG bgimage😡={...}>...</IMG>
...
}




2번 style 컴포넌트 변수쪽에 넣어보기
//////////////////////////////////////////////////
interface IMGTYPE {
	bgimage: any
};

const IMG:IMGTYPE🤪 = styled.div`
	background-image: url(props => props.bgimage😡);
`;

function ...(){
...
<IMG bgimage😡={...}>...</IMG>
...
}

 

 

 

검색해서 알아낸 방법은...

interface IMGTYPE {
	bgimage: any
};

const IMG = styled.div<IMGTYPE>🙉`
	background-image: url(props => props.bgimage);
`;

function ...(){
...
<IMG bgimage={...}>...</IMG>
...
}

styled.div 뒤에 넣어주는 것이었다.

 

 

 

 

 

 

시간을 좀 썼지만 에러 제거에 성공했다!!