[React&TS] ERROR: is not assignable to type 'IntrinsicAttributes
2022. 6. 16. 16:49ㆍ프론트엔드/TypeScript
반응형
#문제발생
타입스크립트를 리액트에 처음 접목시켜보는데 에러가 발생했다.
Type '{ diaryList: ListType[]; }' is not assignable to type 'IntrinsicAttributes & ListType[]'. Property 'diaryList' does not exist on type 'IntrinsicAttributes & ListType[]'.
ts(2322)
What are IntrinsicAttributes in TypeScript?
IntrinsicAttributes interface can be used to specify extra properties used by the JSX framework which are not generally used by the components' props or arguments - for instance key in React.
https://www.typescriptlang.org/docs/handbook/jsx.html
props를 넘겨주면서 나온 오류였는데, 알고보니 자식컴포넌트에서 내가 props를 잘못 입력한 탓이었다.
const DiaryList = (diarylist: ListType[]) => {
console.log(diarylist); // Object
console.log(diarylist.length); //undefined
}
props는 단일객체이고, 배열인 diarylist를 객체에다 집어넣고 타입은 배열로 설정..
그러니 당연히 diarylist는 객체로 나오고 총체적 난국이 되어버렸다...
#문제해결
interface Params {
diarylist: ListType[];
}
const DiaryList = ({ diarylist }: Params) => {
...
}
// 혹은
const DiaryList: FC<Params> = ({ diarylist }) => {
...
}
#복습
1. Array<ListType> / ListType[] : 같은 의미지만 후자로 쓰는 것이 가독성이 좋음.
2. () => (return 값)
3. 객체와 배열 구분 잘 할 것
{...test} // Object
[...test] // Array
반응형
'프론트엔드 > TypeScript' 카테고리의 다른 글
[TypeScript] 타입스크립트 기초 다지기 feat. 캡틴판교 (0) | 2022.06.07 |
---|