ジェネリクスを使用してfluits関数を作成しました。

function App() {
  function fluits<T>(fluit: T): T{
    return fluit
  };
  
  const banana = fluits({
    name: "バナナ",
    price: 138,
  });

  return (
    <>
      <p>{banana.name}は、{banana.price}円です。</p>
    </>
  );
}

export default App;

image2

fluits関数をアロー関数に変えようとすると、

const fluits = <T>(fluit: T): T=> {
  return fluit
};

image3

エラーが発生し、『JSX element 'T' has no corresponding closing tag.』と言われました。

JSXのタグと勘違いしているようです。

こちらを解消するには、<T>にあるTの後に『,』を追加します。

const fluits = <T,>(fluit: T): T=> {
  return fluit
};

これで<T,>は型であると認識してくれたので、エラーが解消されました。

image4

もう一つの方法として、extendsを使用する方法もあります。

const fluits = <T extends unknown>(fluit: T): T=> {
  return fluit
};

こちらもエラーが解消されました。

image5

ブログ一覧