はじめに こんにちは!😄 社内でTypeChallengeを元に勉強会をしているのですが、再帰的に型づけする問題に取り組んでいると、ふとこんなことを思いました。(ちなみに問題はこれです。) 「再帰的に型づけしたデータを使って何か作ってみたいなあ。そういえば、再帰的なコンポーネントも実装したことないな…作るか!🔥」 一見複雑そうに思える再帰的なコンポーネントですが、実装してみると意外と単純な構造であることが分かり、そこでの学びを記事にしましたのでよければ見ていってください! 実装編 今回はシンプルにツリー構造のデータをリストとして出すような簡単なコンポーネントを作成します。完成系は以下になります。 データに型をつける まず、ツリー構造のデータに対して型づけを行います。以下のようにTree型を定義します。 ポイントとなるのはTreeのプロパティであるbranchの型はTree[]であること