覚書 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
}
参考
最近のコメント