TypeScriptでReactを開発するとき、childrenの型をどうするか考える 👦

f:id:kimizuka:20210416093201p:plain

childrenに型をつけなければならない場合は、

import { ReactNode } from 'react';

function Parent({ children }: {
  children: ReactNode
}) {
  return (
    <div>{ children }</div>
  );

という感じで、ReactNodeを使うことにしました。

Reactでコンポーネントが子コンポーネントを受け取る場合、普段だと型を書かずに、

function Parent({ children }) {
  return (
    <div>{ children }</div>
  );

という感じで受け取り、

import Parent from './Parent';

function Page() {
  return (
    <Parent>
      <p>Ya-Ha-!</p>
    </Parent>
  );
}

という感じで使っていました。
以前は逐一型を書いていましたが、最近の方針として、なるべく型推論を使うようにしているからです。

しかし、そうすると、

import Parent from './Parent';

function Page() {
  return (
    <Parent />
  );
}

と、子要素を渡さずにつかうとエラーになってしまいます。

いざ、明示的に型を定義しようとしたんですが、何を使うべきか非常に迷いました。

当初はReactElementを使おうと思ったのですが、こちらの型定義ファイルを眺めてみると、childrenはReactNode、ReactNode[]で定義されていることが多かったので、ReactNodeを使おうと思った次第です。

なので、先の例で子コンポーネント無しでもエラーを出さないようにするなら、

import { ReactNode } from 'react';


function Parent({ children }: {
  children?: ReactNode;
}) {
  return (
    <div>{ children }</div>
  );

というような感じで書こうと思います。

みかづきブログ・カスタム