Typescript `typeof React.Component` 不扩展接口？定义高阶组件时遇到问题

我正在创建一个高阶组件来包装扩展接口的组件：

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”类型的参数不可分配给类型参数 “组件类和 ClickOutsideInterface”。类型“typeof Test”是 无法分配给键入“ClickOutsideInterface”。 类型“typeof Test”中缺少属性“onClickOutside”。

为什么 Typescript 认为我没有实现该接口的任何想法Test?

TypeScript 表示您尚未实现函数参数所需的接口，因为您确实没有实现。

当你写的时候

class A {
  //...
}

您定义两种类型和一种值。

The value，它被命名为A，是班级。这是您调用的函数new创建对象。

首先type，也被命名为A，是对象的类型created通过调用类函数new如上所述。

第二type是该类函数的类型。声明类不会自动为该类型创建名称，但该类型仍然存在，因为所有值都有类型。这个类型是这样写的typeof A因为它是值的类型A，类的类型。

因此，根据您想要实现的目标，您需要

传递一个实例Test

const withClickOutside = clickOutside(new Test);

或者更改您的函数，以便它采用与类本身的类型匹配的对象，而不是它创建的对象

function clickOutside<P>(
  Component: new () => React.ComponentClass<P> & ClickOutsideInterface
) {...}

我怀疑在这种情况下你想要的是后者。

最后，虽然您可能希望将其用于文档目的，这是完全有效的，但我想指出，没有理由实际声明您的类甚至根本实现了该接口。 TypeScript 是一种结构类型语言，所有接口都是通过具有兼容的成员来实现的。