TypeScript箭头函数使用泛型时报错Cannot find name 'T'如何解决？

问题原因 #

TypeScript 开启JSX解析支持时（默认TypeScript Playground、.tsx格式文件都会开启），会把箭头函数前的<T>识别为JSX元素标签，而非泛型参数声明，因此抛出Cannot find name 'T'错误。普通函数的泛型声明位置不会和JSX语法冲突，因此可以正常编译。

正确改写方案 #

有两种常用的兼容写法，功能完全一致，可根据代码规范偏好选择：

方案1：添加泛型尾随逗号 #

在泛型参数后加一个无意义的尾随逗号，告诉解析器这是泛型参数列表，不是JSX标签：

const hasAllPropertiesArrow = <T,>(obj: any, props: (keyof T)[]): obj is T => {
    return props.every((prop) => obj.hasOwnProperty(prop))
}

方案2：添加泛型约束 #

给泛型参数添加显式约束，也可以避免被识别为JSX语法，最通用的约束是unknown或者{}：

const hasAllPropertiesArrow = <T extends unknown>(obj: any, props: (keyof T)[]): obj is T => {
    return props.every((prop) => obj.hasOwnProperty(prop))
}

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