TypeScript .tsx にジェネリクスを使う関数を定義しようとしてハマった

ざっくりしたアプリを作っていて .tsx ファイル内にジェネリクスを使用した関数を作成したら Type Error になって謎… となったのでメモ

`.tsx` にジェネリクスを使った関数を定義したらエラーになった

const buildChunkArray = <T>(array: T[], size: number = 10): T[][] => {
  const chunks: T[][] = [];
  for (let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i + size));
  }

  return chunks;
};

const buildChunkArray = <T>(array: T[], size: number = 10): T[][] => {
👉️ ERROR : unclosed `T` tag / JSX 要素 'T' には対応する終了タグがありません。

`.tsx` では `<T>` を `<T,>` にする必要がある

- const buildChunkArray = <T>(array: T[], size: number = 10): T[][] => {
+ const buildChunkArray = <T,>(array: T[], size: number = 10): T[][] => {
  const chunks: T[][] = [];
  for (let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i + size));
  }

  return chunks;
};

tsx ファイルでは <, > で囲われたものはタグだと解釈されるのが原因だと思うが、, 入れればOKって Tips すぎるじゃんよー

[参考]