このTypeScriptのエラーはどういった状態になると表示されるか知りたい。

Question

前提

<div>
  <Child numberArray={numberArray} setState={setState} />
</div>

親コンポーネントから子コンポーネントへnumberの配列とsetStateを渡し、

type useChildProps = {
  numberArray: number[];
  setState: Dispatch<SetStateAction<boolean>>;
}

const useChild = ({numberArray, setState}: useChildProps ) => {
  ...
  return {hoge, fuga}
}

const ChildContainer: React.FC<useChildProps > = ({numberArray, setState}) => {
  const [hoge, fuga] = useChild({numberArray, setState});
  return <ChildComponent hoge={hoge} fuga={fuga}>
}

ChildContainerでprops受け取り、そのままカスタムフックに渡し、カスタムフックの返り値をChildComponentに渡しています。

上記の構成およびコードの書き方だと、VSCodeが親コンポーネントのpropsのnumberArrayを対象に下記のエラーを表示します。

型 '{ numberArray: number[]; setState: Dispatch<SetStateAction<boolean>>; }' を型 'IntrinsicAttributes & ChildComponentProps & { children?: ReactNode; }' に割り当てることはできません。

プロパティ 'numberArray' は型 'IntrinsicAttributes & AlarmingComponentProps & { children?: ReactNode; }' に存在しません。

このエラーはどういった書き方や、どういうことが起きていると表示されるエラーでしょうか。

このエラーを再現しようとサンプルをCodeSandBoxで作ってみたものの、上記のエラーとは全く違うエラーが表示されたので、具体的な回答をいただくのが難しそうなことと、根本的に私の考え方や書き方に誤りがあると考え質問しました。
サンプル

Answer 1

根本的に私の考え方や書き方に誤りがあると考え質問しました。

コード例では、親が呼んでいるのは<Child>ですが、子として書かれているのは<ChildContainer>です。

エラーの出方なども踏まえると、正しくない子コンポーネントを参照しているだけではないかと思います。

Comments

[maisumakun]

「サンプル」として上げているコードは、「return {hoge, fuga}」を「const [hoge, fuga] =」で受け取ろうとしてエラーとなっているようです。

[TofuLove]

正しくない子コンポーネントを参照していました。解決できました。サンプルのエラーも解決していただきまして本当にありがとうございました。