子要素の型定義はPropsWithChildrenが便利

PropsWithChildrenというものを知りました。
この記事では利用方法について伝えます！

PropsWithChildrenどんな型？

コンポーネントの子要素で受け取る型を定義する方法です。

通常、子要素を受け取るコンポーネントを定義する際にはPropsの型を定義する必要があります。
例えば以下のように記述します。

type Props = {
  children: ReactNode;
};

function Component({ children }: Props) {
  // ...
}

しかし、この方法では毎回childrenをPropsに書く必要があります。
PropsWithChildrenを使用すると、以下のように記述できます。

import { PropsWithChildren } from 'react';

function Component({ children }: PropsWithChildren) {
  // ...
}

PropsWithChildrenと一緒に定義したPropsを利用する

propsがchildren以外にもある場合は任意で定義したPropsの型と一緒に利用することもできます。

import { PropsWithChildren } from 'react';

type Props = {
  label: string;
};

function Component({ children, label }: PropsWithChildren<Props>) {
  // ...
}

PropsWithChildrenの中身は？

PropsWithChildrenの定義は以下のようになっています:

type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

PropsWithChildrenはジェネリック型Pと子要素childrenを持つオブジェクトの交差型です。
子要素はReactNodeかundefinedであることが期待されます。

交差型というのは&で結合されて利用する型のことを言います！

【子要素の型定義はPropsWithChildrenが便利】まとめ

typeを利用して一つずつ定義するのも良いのですが、すでに定義されているPropsWithChildrenのような型を利用することで簡潔に型安全なコンポーネントを作ることが可能です。

Omitなども併用すること自身で定義しなくても型の定義はできてしまうので積極的に利用していくのが良いと考えます！

Omitについては別の記事で紹介したのでよければご覧ください。