---

---

【TypeScript】.tsx内でGeneric関数を定義する場合の注意点

投稿日：2021年5月15日

TypeScriptで便利な機能の一つにGenerics関数というものがあります。しかし、実はこのGenericsの表現は特定の条件下では言語のルール通り書いてもエラーになってしまいます。この記事ではtsxファイル内でのGenerics表現の注意点について詳しく解説しています。

---

はじめに

この記事について

環境について

---

実践

function宣言を使った関数定義

function SampleFunc<T>(sampleValue:T){
    console.log(`value : ${sampleValue} \r\ntype : ${typeof sampleValue}`);
}

アローでGenericsの関数定義

const SampleFunc = <T>(sampleValue: T) => {
  console.log(`value : ${sampleValue} \r\ntype : ${typeof sampleValue}`);
};

JSX element 'T' has no corresponding closing tag.ts(17008)
Cannot find name 'T'

エラーの原因

解決方法

const SampleFunc = <T, K>(sampleValue: T, sampleKey: K) => {
  console.log(`value : ${sampleValue} \r\nkey : ${sampleKey}`);
};

const SampleFunc = <T,>(sampleValue: T) => {
  console.log(`value : ${sampleValue} \r\ntype : ${typeof sampleValue}`);
};

const SampleFunc = <T extends string>(sampleValue: T) => {
  console.log(`value : ${sampleValue} \r\ntype : ${typeof sampleValue}`);
};

const SampleFunc = <T extends unknown>(sampleValue: T) => {
  console.log(`value : ${sampleValue} \r\ntype : ${typeof sampleValue}`);
};

---

さいごに

感想

---

---

---