Reactの型システムの解説

1. 主要な型の比較

React.FC vs React.ElementType

React.FC (Function Component)

• 関数コンポーネントを定義するための型
• React 18以前は暗黙的にchildrenプロパティを含んでいた
• 現在はあまり使用されない傾向にある

// 従来の方法（あまり推奨されない）
const Component: React.FC<Props> = ({ title }) => { ... }

// 現在推奨される方法
const Component = ({ title }: Props) => { ... }

React.ElementType

• より広範な型で、Reactでレンダリング可能な任意のコンポーネント型を表す
• HTML要素（'div'、'span'など）やReactコンポーネントを含む
• 動的なコンポーネントの使用に適している

React.ReactNode vs React.ReactElement vs JSX.Element

React.ReactNode

• 最も包括的な型
• 文字列、数値、boolean、null、undefined
• JSX要素、React要素
• これらの配列なども含む
• childrenプロパティの型付けに最適

React.ReactElement

• より具体的な型
• type、props、keyプロパティを持つオブジェクト
• React.createElement()が生成する要素の型

JSX.Element

• 基本的にReact.ReactElementと同様
• TypeScriptがJSX式の戻り値の型として使用

2. 実践的なアドバイス

1. コンポーネントのchildrenを受け取る場合：

interface Props {
  children?: React.ReactNode;  // 最も柔軟な型定義
}

2. 動的コンポーネントを扱う場合：

interface Props {
  component: React.ElementType;  // コンポーネントを props として受け取る
}

3. 重要なポイント

• React.FCの使用は必須ではなく、単純なprops型の定義で十分
• childrenを受け取るコンポーネントにはReact.ReactNodeが最適
• 動的なコンポーネントの受け渡しにはReact.ElementTypeを使用

この記事の内容は、TypeScriptとReactを使用する際の型システムの理解を深めるのに役立ちます。適切な型を選択することで、より安全でメンテナンス性の高いコードを書くことができます。

リファレンス

https://dev.to/itswillt/explaining-reacts-types-940