reactjs - 使用通用 React 组件时，在 TS 3.2+ 中出现错误

Question

此代码使用 TypeScript 3.1.x 编译得很好

import React from 'react';

interface IErrorProps {
    error: string;
}

export default function foo<TErrorProps extends IErrorProps>(
    ErrorCmp: React.ComponentType<TErrorProps>
) {
    return () => {
        return <ErrorCmp error="test error" />;
    }
}

但是如果我用 TypeScript 3.2 或更高版本编译它，我会得到

 error TS2322: Type '{ error: string; }' is not assignable to type 'TErrorProps'.

这是 TS 3.2 中的回归还是 3.2 修复了我的代码正在利用的漏洞？

有趣的是，这段代码在 3.1 中也无法编译

interface IErrorProps {
    error: string;
}

export default function foo<TErrorProps extends IErrorProps>(
    ErrorCmp: (props: TErrorProps) => string
) {
    return () => {
        return ErrorCmp({ error: 'test error' });
    }
}

有错误

Argument of type '{ error: string; }' is not assignable to parameter of type 'TErrorProps'

Answer 1

打字稿是正确的。考虑以下：

foo<{error: string, whatever: number}>(obj => `${obj.error} (${obj.whatever})`);

这在您的泛型约束下是有效的，如{error: string, whatever: number}extends {error: string}。

但是你只用error钥匙调用它。几乎可以保证无效。