TypeScript泛型参数在.tsx文件中无法识别的解决方法咨询

这个问题我之前也碰到过！在.tsx文件里，TypeScript编译器会把箭头函数里的<T>当成JSX元素的起始标签，而不是泛型参数声明，所以才会报找不到T和未闭合标签的错误。下面给你几个可行的解决办法：

• 给泛型参数添加默认约束
  你可以给泛型参数加上extends unknown或者extends any的约束，这样编译器就会明确这是泛型声明，而不是JSX标签：

  const test = <T extends unknown>(a: string) => { 
    return a; 
  };
  

  这个方法很直观，也不会改变函数的泛型行为，因为unknown是TypeScript中最顶层的类型，不会对T的范围做额外限制。

• 在泛型参数后加逗号
  在泛型参数的尖括号末尾加个逗号，这是一个小技巧，能让编译器区分开泛型和JSX标签：

  const test = <T,>(a: string) => { 
    return a; 
  };
  

  JSX标签的语法里不会在标签名后面加逗号，所以编译器看到<T,>就会知道这是泛型参数。

• 改用function关键字声明函数
  如果你的场景允许，直接用普通函数声明代替箭头函数，这样泛型的语法就不会和JSX冲突了：

  function test<T>(a: string) { 
    return a; 
  }
  

  普通函数的泛型声明语法在TSX里是完全兼容的，不会有解析歧义。

如果你的函数需要返回JSX元素，只需要把返回逻辑调整一下就行，比如：

const test = <T extends unknown>(a: string) => { 
  return <div>{a}</div>; 
};

内容的提问来源于stack exchange，提问作者nagylzs