[TS] 객체로 이루어진 배열 type(feat.props)

List 파일(item을 담고있음)

articleInterface는 배열안에 들어가는 각각의 객체로 이루어진 item이다.

articlesInterface는 그 객체로 배열이 이루어져 있다는 것을 의미한다.

interface articleInterface {
  id: number;
  title: string;
  ...
}

interface articlesInterface {
  articles: articleInterface[];
}

export default function ArticleList({ articles }: articlesInterface) {
..

 

Item 파일

하위 파일에는 articleInterface만 필요하기때문에 해당 interface작성을 하였다.

그리고 구조분해할당에서는

그냥 ({article}:articleInterface)를 할 경우는 article을 찾을수 없다고 오류가 나기 때문에(이렇게 쓰일 경우는 자체를 다 담는게 아니라 해당 article이 interface안에서 article:number; 이런식으로 명확하게 제시가 되어야하기때문) 

아래와 같이 매개변수 type을 작성해야한다.

interface articleInterface {
  id: number;
  ...
}

const ArticleItem = ({ article }: { article: articleInterface })

 

방법참고)

https://ryugaram.tistory.com/137

Props + 배열 안에 객체

https://cpro95.tistory.com/656?category=929244 

타입스크립트 React props 전달하는 방법 및 IntrinsicAttributes 오류 해결