インターフェイスを拡張するコンポーネントをラップする高次コンポーネントを作成しています。
interface ClickOutsideInterface {
onClickOutside: (e: Event) => void
}
私が作成したファクトリは、次のReact.ComponentClass
実装を期待していClickOutsideInterface
ます。
function clickOutside<P>(Component: React.ComponentClass<P> & ClickOutsideInterface){
return class ClickOutside extends React.Component<P, {}> {
/* on click outside invoke Component.onClickOutside */
render() {
return(<div><Component {...this.props} /></div>)
}
}
}
ファクトリをテストするために、コンポーネントを拡張するコンポーネントを実装しました。ClickOutsideInterface
class Test extends React.Component<TProps, TState> implements ClickOutsideInterface {
onClickOutside(event: Event): void {
this.setState({
closed: true
})
}
render(){
return(
<div>{this.state.closed}</div>
)
}
}
しかし、関数の引数としてコンポーネントを使用するとclickOutside
:
const withClickOutside = clickOutside(Test)
引数 に対して次の型エラーが発生しますTest
。
タイプ 'typeof Test' の引数は、タイプ 'ComponentClass & ClickOutsideInterface' のパラメーターに割り当てることができません。タイプ「typeof Test」はタイプ「ClickOutsideInterface」に割り当てられません。プロパティ「onClickOutside」がタイプ「typeof Test」にありません。
Typescript がインターフェイスを実装していないと信じる理由はありますTest
か?