型 'IntrinsicAttributes & boolean' に割り当てることはできません。

Reactは初心者です。

HTML, CSSは昔案件とったりしてたけど全て記憶が飛んでるし、Reactはだいぶ前にちらっと触ってまだ何やるのも新鮮だし、UI作るの楽しい。

まずは早く完全に理解したレベルに入りたい。

ちゃんと体系立てて勉強した人からみると変なことをやってるでしょうが、同じつまづき方する人がいるかもしれないので備忘録を兼ねて書きます。

やりたいこと

さて、メインコンポーネントの処理内容によって画面に適用するCSSを変更したい、というのが今回やりたいことです。
簡略化するとこういうコードを書いてました。
(やりたいこと優先だった当時の自分を表現するのにタグ内には気持ちを記述してます。)

typescript App.jsx

function App() {
  const [StateA, setStateA] = useState(false);
  return (
    <div>
      <Header {/* StateAを持たせたい*/} />
      <div className='App'>
        <MainComponent {/*StateAとsetStateAを持たせてStateAを変化させたい*/} />
      </div>
    </div>
  );
}

HeaderコンポーネントとMainComponentコンポーネントにStateAとsetStateAをpropsとして渡して制御していくことになります。

作業内容

App.jsx

それを踏まえるとAppコンポーネントでは下のように修正が入ります。

function App() {
  const [stateA, setStateA] = useState(false);  
  return (
    <div>
      <Header stateA={stateA} />
      <div className='App'>
        <MainComponent stateA={stateA} setStateA={setStateA} />
      </div>
    </div>
  );
}

Headerコンポーネント

さて、次にとりあえずHeaderコンポーネントでは

function Header(isRunning: boolean){
    {/* 以下省略 */}
    

と書いてみました。(必要な時まであんまり調べないでやってみてるため不勉強が続きます)

さて、これだとAppコンポーネントの方では

“型 '{ stateA: boolean; }' を型 'IntrinsicAttributes & boolean' に割り当てることはできません。ts(2322)”

という表示が出ます。

というわけでpropsの渡される側のコンポーネントに型宣言が必要ということで、interfaceを使って

interface StateAProps {
    stateA: boolean;
}

fucntion Header({stateA}: StateAProps){
    {/* 以下省略 */}

という感じで変更します。何が変わっているかというと

• interfaceでの型宣言
• stateAを{}でくくって渡している(StatePropsで型宣言)

これでエラーが出なくなり、最初にやりたかったMainComponentで状態が変わった時にHeaderも含めcssの内容を変更することができました。

まとめ

1. Reactでpropsを渡す際は、受け取る側のコンポーネントで適切な型定義が必要
2. TypeScriptではinterfaceを使って型を定義できる

普段pythonしか触ってませんが、うろ覚えで「これで文法正しかったらいいな」って感じでとりあえずやってみると一筋縄ではいかないって話でした。