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

TypeScript是正确的。请考虑以下内容：

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

这在您的通用约束下有效，因为{error: string, whatever: number}扩展了{error: string}。

但是您仅使用error键来调用它。几乎可以保证无效。

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

1 个答案: