[ERR] TS2322: Type '??' is not assignable to type 'IntrinsicAttributes & IProps'.

최경락 (K_ROCK_)·2022년 5월 26일
0

ERR

TS2322: Type '{ content: string; setTodoList: Dispatch<any>; }' is not assignable to type 'IntrinsicAttributes & IProps'.
  Property 'setTodoList' does not exist on type 'IntrinsicAttributes & IProps'.

WHEN

  • 하위 컴포넌트로 상태갱신 함수를 전달하던 중 타입에러가 발생했다.

WHY

  • 이는 하위 컴포넌트에서 전달받으려는 props의 타입을 지정해주지 않아서 생기는 오류였다.

SOLVE

  • 먼저, 어떤 타입이 전달될지 모르므로 any와 unknown 타입을 선택 할 수 있었는데, 둘중 unknown 이 더 안정적인 개발이 가능하다고 하여 unknown을 선택했다.
  • props의 이름과 해당 타입을 자식 컴포넌트의 인터페이스에 추가해줌으로써 해결했다.
interface IProps {
  setTodoList: unknown;
}

function Input({ setTodoList }: IProps): JSX.Element {
  return (
    <Container>
      <form>
        <input type="text" />
        <button type="button">+</button>
      </form>
    </Container>
  );
}

  • 아무 생각없이 전달해주던 상태 갱신함수마저 오류를 뿜으니 상당히 당황스럽다...
  • 하지만 이번에 시간을 들여 원인을 찾았으니, 다음부턴 확실하게 알 수 있을 듯!

0개의 댓글