TSX ファイル中の関数式でジェネリクスを使うとエラーになる

TSX ファイル中の関数式でジェネリクスを使うとエラーになる

May 1, 2022

JSX element 'T' has no corresponding closing tag. #

こんなエラーが出て初めて知りました。長いこと TypeScript 使っていながら意外と知らなかったのでメモ。

関数式でジェネリクスを使うとエラーになる # 

const Component: Props = () => {
  // ❌ TS ERROR: JSX element 'T' has no corresponding closing tag.
  const someFunc = <T>(arg: T) => {
    return arg;
  };

  return <p>It's ERROR (;-;)</p>;
};

関数宣言ならばエラーにならない # 

const Component: Props = () => {
  // ⭕️ (NO ERROR)
  function someFunc<T>(arg: T) {
    return arg;
  }

  return <p>It's OK (^_^)</p>;
};

関数式でもジェネリクスにカンマをいれるとエラーにならない # 

const Component: Props = () => {
  // ⭕️ (NO ERROR) 👇 T の後に "," をつける
  const someFunc = <T,>(arg: T) => {
    return arg;
  };

  return <p>It's OK (^_^)</p>;
};

参考 #

こちらの ISSUE が詳しいです。

This is a limitation cased by the use of <T> for generic type parameter declarations. combined with JSX grammar, it makes such components ambiguous to parse.