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

2020-02-14

久しぶりに技術的な話。

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;

スッキリ。

© 2018 kk-web