覚書 Reactでアロー関数にTypeScriptのジェネリクスを使う時の注意点

React(jsxファイル)で、以下のようにアロー関数にTypeScriptのジェネリクスを使うとエラーになります。

// 関数の中身は適当です
const getValue = <T>(v: T): T => {
  return v
}
TS17008: JSX element 'T' has no corresponding closing tag.

<T>の部分がReactのjsxのタグと判定されてしまうためです。

以下のようにすることで回避ができます。

// アロー関数ではなく、functionを使って宣言する
const getValue = function<T>(v: T): T{
  return v
}

// extends を使い、TypeScriptのジェネリクスであることを明示的にする
const getValue = <T extends {}>(v: T): T => {
  return v
}

参考

https://github.com/Microsoft/TypeScript/issues/15713

React, TypeScript, 覚書

Posted by たみぼうず