More than 3 years have passed since last update.

TSX内でジェネリクスの型引数を1つにする方法

Last updated at 2020-12-14Posted at 2020-12-14

やりたいこと

tsxファイル内で、型引数が1つの関数を作る。

const fn = <T>() => {
  // 省略
}

tsファイルであれば上記のように書くだけですが、tsxファイル内だと下記のエラーが出ます。

TS17008: JSX element 'T' has no corresponding closing tag.

これは<T>がコンポーネントとして認識されてしまっているためです。

型引数の後にカンマをつける

const fn = <T,>() => {
  // 省略
}

この方法は、こちらの issueで紹介されていました。

他にも<T extends {}>などでも回避出来るという記事がありましたが、
私の環境ではeslintの@typescript-eslint/ban-typesでエラーになったため採用しませんでした。