TypeScriptで型の条件分岐が色々方法あるの知らなかった…
1つ目、特定のPropsに応じて条件分岐させる。
そもそも、TypeScriptにはConditionalTypeっていうのがある
こういう例で一番出てくるのはボタンコンポーネントがa
タグかbutton
タグか、で指定したいPropsが変わってくるよね、という例
それの最終形みたいなのが以下
ComponentPropsWithRef
はHTMLのプロパティを受け取るやつ。button
タグならtype
とか、a
タグならhref
とか。
buttonコンポーネントで、タグがa
かbutton
かinput
かでPropsを指定するものは指定し、不要なものはneverで拒否していますね。
そしてまた別の方法。
この記事では、
このライブラリを使って、buttonコンポーネントにas
を指定したらspan
になるのでonClick
, type
は指定できなくする、という方法。
どちらも使い所かなりありそうだな…今度なにかで使ってみよう…