私が歌川です

@utgwkk が書いている

TypeScript + JSXでrenderするコンポーネントに型引数を書ける

子ネタだしタイトルが全てだけど、おもしろかったので共有します。

たとえば、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時に「型注釈」を渡す、と書いていたけど正しくは「型引数」だったので修正しました。