子ネタだしタイトルが全てだけど、おもしろかったので共有します。
たとえば、react-router (react-router-dom) v5 の Link コンポーネントの to propには、文字列・オブジェクト・関数を渡すことができる。
ここで、react-router-domの型定義を見ると、<Link> コンポーネントはジェネリックな関数・インタフェースとして定義されていることが分かる。
これらを踏まえて以下のようなコードを書いてみると、コンパイルが通るし動作することが分かる。renderしたいコンポーネントに型引数を書くことができる。
type State = ...; export const WrappedLink = () => <Link<State> to={(location) => ...} />
こすると to propの関数の location 引数の型が Location<State> に推論されて便利だけど、見た目はおもしろい。関数呼び出しだと思うと、ここに型引数が書けるのはそういうものかとも思う。
2021/7/26 12:54 追記: コンポーネントのrender時に「型注釈」を渡す、と書いていたけど正しくは「型引数」だったので修正しました。
