ReactのReactNodeとかReactElementとかJSX.Elementとかのお調べ学習

はじめに

みなさん、こんにちは torihaziです！

今回はタイトルのことについて Claudeとわちゃわちゃしながら

突き詰めてみました！

なんとなく理解したのでその結果です！

ReactNodeとかReactElementとかJSX.Elementとか

最近 Typescriptを扱うようになって、「なんとなく」指定していたことが多く

それが少しでも解消できればと思ってまとめてみました。

では！

結論

                      ReactNode
                  /      |       \
                 /       |        \
                /        |         \
               /         |          \
              /          |           \
             /           |            \
            /            |             \
           v             v              v
string | number    ReactElement     その他の型
boolean | null         |         (undefined, 配列)
                       |
                       |
                       v
                  JSX.Element
                  /         \
                 /           \
                /             \
               v               v
     DOMElement            CustomElement
    (div, span等)        (Reactコンポーネント)
                                |
                                |
                                v
                            React.FC

Claudeに包含関係書いて、って言ったらこんな感じで図で表してくれました。

こういう書き方もできるんですね。学びです。。

少しわかったこと。

とりあえず nullになる可能性がある場合や文字列が入る可能性がある場合は React.ReactNodeという型を

指定する方が安心、とのことがわかりました。

きっちり分けるのであればこの図のように深掘りが可能だということは

今後のために知識の1つとして頭に入れとこうと思います。

とにかく ReactNodeとReactElementとJSX.Elementは違う、ということは理解しました！

終わりに

まだまだですね。

とりあえず書き尽くして、なんでこれダメなの、

とか疑問に思う時あると思うのでその時にまた深掘って行こうと思います！

では今回は以上！