Question

我有一个名为＆＃34; test.ts＆＃34;的示例文件。使用此代码：

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

有效！如果我将文件重命名为＆＃34; test.tsx＆＃34;然后Visual Studio Code用红色标记T参数，并给出以下错误：

[ts] Cannot find name 'T'.

[ts] JSX element 'T' has no corresponding close tag.

我必须使用.tsx扩展名，因为实际代码需要返回JSX元素。我还必须使用类型参数。但我怎么能两个都做？

Answer 1

Tsx和通用箭头功能不能很好地混合。最简单的解决方案是使用常规函数，因为您无论如何都不会从声明的上下文中捕获this：

const withLazyStatus = function<T>(WrappedComponent: React.ComponentType<ILazyState<T>>) {
    return class WithLazyStatus extends React.Component<ILazyState<T>> {
        // Enhance component name for debugging and React-Dev-Tools
        static displayName = `withLazyStatus(${WrappedComponent.name})`;

        render() {
            let props = this.props;
            if (props.fetching) {
                return loading;
            } else if (props.error) {
                return error(props.error);
            } else {
                return <WrappedComponent {...this.props} />;
            }
        }
    };
};

或者另一种选择是添加类型约束：

 const withLazyStatus = <T extends object>(WrappedComponent: React.ComponentType<ILazyState<T>>) {
        return  ...
  };

约束将消除通用vs标记结构的歧义

Answer 2

TypeScript还对类型断言使用尖括号，因此JSX的语法会引入某些解析困难。

因此，您可以使用关键字const test = (a: string) => { return a; } as T;：

{{1}}

as运算符在.ts和.tsx文件中均可用，并且行为与其他类型断言样式相同。

TypeScript - 在tsx文件中无法识别的类型参数？

2 个答案: