青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

TypeScript、型の条件分岐、色々ある ConditionalTypeとかts-xorってライブラリ使うとか

TypeScriptで型の条件分岐が色々方法あるの知らなかった…


1つ目、特定のPropsに応じて条件分岐させる。

そもそも、TypeScriptにはConditionalTypeっていうのがある

qiita.com

こういう例で一番出てくるのはボタンコンポーネントがaタグかbuttonタグか、で指定したいPropsが変わってくるよね、という例

それの最終形みたいなのが以下

zenn.dev

ComponentPropsWithRefはHTMLのプロパティを受け取るやつ。buttonタグならtypeとか、aタグならhrefとか。

ginpen.com

buttonコンポーネントで、タグがabuttoninputかでPropsを指定するものは指定し、不要なものはneverで拒否していますね。


そしてまた別の方法。

tech.recruit-mp.co.jp

この記事では、

github.com

このライブラリを使って、buttonコンポーネントにasを指定したらspanになるのでonClick, typeは指定できなくする、という方法。


どちらも使い所かなりありそうだな…今度なにかで使ってみよう…