Closed2022/06/01にクローズ3

[TypeScript]共用体型に (string & {}) を含めた時の挙動を調べる

きっかけ

React + Typescript な環境で input 要素のラッパーコンポーネントを作る機会がありました。
その流れで、input 要素の type 属性の型（HTMLInputTypeAttribute）を眺めていたところ、共用体型に (string & {}) が含まれていて「？？？」となったので、少し調査してみようと思います。

ちょっと整理

一旦、(string & {})を抜きにして整理すると、共用体型の文字列リテラル型（表現が合ってるかな？）なので、列挙してあるリテラル以外は格納することができない。
例えば、'button' はOKだが、'button2'はエラーになる。

`(string & {})`が含まれるとどうなる？

結論から言うと、列挙されているリテラル以外を入力してもエラーになりませんでした。

こちらの挙動について調べていたところ、 (string & {})について言及している記事がありました。

記事を読んでこのように解釈しました。

HTMLInputTypeAttributeで下記を実現したかった。

自動補完を効かせたい
将来、input要素に非互換な変更があってもエラーにしたくない

上記を満たすため、HTMLInputTypeAttributeに(string & {})を追加している✍️

試してみたところ、確かに自動補完が効く & 列挙されている文字列リテラル以外を設定してもエラーにならなかった。なるほど〜👀

このスクラップは2022/06/01にクローズされました