[Typescript] Binding element '~' implicitly has an 'any' type.

문제 발생

컴포넌트의 props에 대한 타입을 지정할 때 에러가 발생했다. 

 

return (
	~
	<ReviewBox 
    		reviewList={reviewList}
	/>
)

 

// interface/main.ts

export interface ReviewMainData {
    age: number;
    comments: number;
    content: string;
    endDate: string;
    gender: string;
    hashtags: string[];
    hits: number;
    image: string;
    likes: number;
    nationName: string;
    regDateTime: string;
    regionName: string;
    reviewId: number;
    startDate: string;
    title: string;
    useProfileUrl: string;
    username: string;
}

 

먼저 다음과 같이 하위 컴포넌트에 전달한 props에 대한 interface를 정의해주었다.

 

그리고 해당 형태로 props에 대한 타입을 지정했는데

 

 

다음과 같은 에러가 발생했다.

 

해결

Typescript가 암묵적으로 reviewList의 타입을 any로 추론하였다.

따라서 전체 props 객체에 대한 타입을 명시적으로 지정하는 Props 타입을 만들어서 사용해야 한다고 한다.

 

다음과 같은 형태로 바꿨더니 에러가 해결됐다.

props에 대한 형식을 지정할 때는 props 내부의 요소들에 대한 타입 지정이 아닌 props 객체 전체에 대한 타입을 지정해야 한다는 사실을 알게 됐다.