hoge: ReactNode ってイマイチな書き方かも？と思った

久しぶりに技術的な話。

React × TypeScript の組み合わせで書いていると、たまに以下のようなケースに対し記述を行うことがある。

Hoge コンポーネントに props として fuga を与える

その fuga は、div タグの子要素として使用される

よくあるケースである。

で、今までは以下のように記述していたのだけれど。

import React, { FC, ReactNode } from "react";

export type HogeProps = {
  fuga: ReactNode;
};

const Hoge: FC<HogeProps> = ({ fuga }) => <div>{fuga}</div>;

export default Hoge;

（普通なら children を与えるケースだけど、例なので）

fuga の型に着目すると、fuga に ReactNode 型を許容している状態なわけで。

よくよく考えてみると、別に ReactNode 型以外を与えても、何ら問題はないよな、と。

むしろ、勝手に ReactNode 型に制限しちゃうのはあまりよろしくないと思い、以下のように書き直した。

import React, { DetailedHTMLProps, FC, HTMLAttributes } from "react";

export type HogeProps = {
  fuga: DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  >["children"];
};

const Hoge: FC<HogeProps> = ({ fuga }) => <div>{fuga}</div>;

export default Hoge;

スッキリ。