如何在TypeScript中使用Generics抽象Redux的连接方法？

Question

我想抽象Redux的connect方法来重复使用并避免使用样板代码。

class Props {
    counterState?:CounterState;
}
class Counter extends React.Component<Props,{}> {
    render() {
        return (
            <div></div>
        );
    }
}
export default connect<Props>((props:Props)=>props, {})(Counter);

抽象需要<P>用于道具，<C>用于组件。我的问题如下：

有关如何正确传递Counter组件的任何想法吗？

谢谢！

Answer 1

<...>之间的类型 - 您告诉编译器您将使用P和C（在此case）作为类型，但允许调用者给你那些类型而不是自己定义它们。

你想要像

这样的东西

function wireUp<P>(C: React.ComponentClass<any>) {
  return connect<P>(props => props)(C);
}

其中P是泛型类型，C是值（扩展/实现组件）

但是，iirc，connect有三种泛型类型。请参阅我的回答here。