以适当方式键入对象作为道具

Question

目前，我有以下组件

SearchButton.tsx

export interface Props {
  // some other props
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

export const SearchButton: React.SFC<Props> = ({
  // other props
  onClick,
})

Popover.tsx

interface ButtonComponentProps {
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

interface Props {
  buttonComponent: React.ComponentType<ButtonComponentProps>;
}

class FilterPopover extends React.Component<Props, State> {
    render() {
        const {buttonComponent: BtnComponent} = this.props;
        return (
            <div>
                //...
                <BtnComponent onClick={this.open} />
            </div>
        )
    }

}

Page.tsx

<Popover buttonComponent={SearchButton}/>

但是我在类型之间有一个不匹配的地方：

The expected type comes from property 'buttonComponent' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Popover> & Readonly<{ children?: ReactNode; }> & Readonly<Props>'

因此，如果我从Popover.tsx更改道具

interface ButtonComponentProps {
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

然后接口匹配，但是Typescript如何通过SearchButton推断此类型？ 以这种方式匹配接口可以吗？ 为什么这些应该相同？

React 16.4.1打字稿3.0.1

Answer 1

TypeScript正在将SearchButton的类型（即React.SFC</*SearchButton*/ Props>与FilterPopover的buttonComponent React.SFC</*SearchButton*/ Props>的类型（即React.ComponentType<ButtonComponentProps> 。 查看React.ComponentType<P>的定义 ，一个替代方法是React.StatelessComponent<P> ，这是React.SFC<P>另一个名称。 React.SFC<P>在P是不变的，这意味着替换P的类型（ SearchButton Props和ButtonComponentProps ）必须完全匹配。

您可能会认为，接受可选道具onClick的组件应该可以代替接受必需道具的组件可用，因为这仅意味着将始终设置optional属性。 但是，由于声明了无状态组件的可选propTypes和defaultProps字段的方式不同，情况并非如此。 我对类型声明设计背后的详细原理不熟悉。 最简单的方法就是完全匹配您的props接口。