如何在 Typescript 中正确使用接口

Question

我遇到了一个关于接口和 Typescript 的问题。下面的例子： 从 "react" 导入 * as React;

/*
 * An interface used to describe the properties of the react component.
 */
interface IUnsafeComponentProps {
    component: IUnsafeComponent //& typeof React.Component;
}

/*
 * An interface used to describe every component that is allowed to be rendered. 
 * It needs to define a property called "componentName".
 */
export interface IUnsafeComponent {
    componentName: string;
    componentStyles?: {};
}

/*
 * The React component itself used to render the unsafe component.
 */
export class UnsafeComponent extends React.Component<IUnsafeComponentProps, any> implements IUnsafeComponent {

    public componentName: string;

    constructor(props: IUnsafeComponentProps) {
        super(props);
        this.componentName = "UnsafeComponent";
    }

    public render(): JSX.Element {
        return <this.props.component/>;
    }
}

这样一个包装器的原因是允许在我的应用程序中呈现第三方代码。如果我现在尝试使用该组件：

let content = <UnsafeComponent component={UnsafeComponent}/>;
ReactDOM.render(content, document.getElementById("root"));

我收到以下错误消息：

类型“typeof UnsafeComponent”不可分配给类型“IUnsafeComponent”。

[0] 类型“typeof UnsafeComponent”中缺少属性“componentName”。

我真的不知道为什么我的 ddeclaraion 是错误的。我对 Typescript/Javascript 很陌生。也许我在这里遇到了一些非常基本的错误。

Answer 1

这个声明说你想要一个IUnsafeComponent的instance：

interface IUnsafeComponentProps {
    component: IUnsafeComponent //& typeof React.Component;
}

在这里，您为UnsafeComponent 传递了构造函数：

<UnsafeComponent component={UnsafeComponent}/>;

您可能想要的是这个，它表示您需要一些构造函数来生成IUnsafeComponent：

interface IUnsafeComponentProps {
    component: new(...args: any[]) => IUnsafeComponent;
}

另请参阅 What does the error "JSX element type '...' does not have any construct or call signatures" mean?，其中讨论了 JSX 组件引用如何指向类构造函数，而不是类实例。