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

Question

This code compiles just fine with 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" />;
    }
}

But if I compile it with TypeScript 3.2 or newer, I get

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

Is this a regression in TS 3.2 or did 3.2 fix a loophole my code was taking advantage of?

Interestingly, this code fails to compile in 3.1 as well

interface IErrorProps {
    error: string;
}

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

with the error

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

Answer 1

TypeScript is correct. Consider the following:

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

This is valid under the constraints of your generic, as {error: string, whatever: number} extends {error: string} .

But you are calling it with only the error key. It is almost guaranteed to be invalid.