2

インターフェイスを拡張するコンポーネントをラップする高次コンポーネントを作成しています。

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か?

4

1 に答える 1