TypeScriptを実際に業務で利用して初めて分かったことを今後TypeScriptを利用し始める人のために残します！
独自で型定義するよりあるものを使う方が良い
たとえばclassNameの型を定義しようと思った場合初心者の私は下記のように定義しました。
type Props = {
className: Array<string>;
}
classNameを複数受け取るために配列かつ文字列としてpropsで受け取れるように定義しました。
間違いではありませんが、これだとclassNameを配列で渡さないといけないことを知らないと利用できないコンポーネントになってしまい扱いにくいです…
また、classNmaeという名称のPropsにしてしまった場合、JSXのclassNameと名称が同じなのに、機能が違うため混乱を招く恐れもあります…。
なのでJSXのclassNameと同じように定義することが望ましいです！
type Props = {
className: ComponentProps<'div'>['className']
}
定義したコンポーネントがdiv要素の場合と仮定すると上記のように記述できます。
JSX.IntrinsicElements['div']['className']を利用することも可能です！
まとめ
初期段階で設計の穴を作ってしまうと後に大きな工数を支払って解消すべき技術負債になる可能性を秘めていると考えています。
今回の例は単体ではちょっとの扱いにくさですが、積み重なると修正のし辛さになり、開発生産性を落とすことにつながっていきます…
独自で定義してしまうのは知識のなさゆえなので、初期段階ではなるべくたくさんの方にコードを見てもらえる状況を作れると良いと考えています。