[ts] connect() types don't work for class Components

[mike-north]

Typings work fine for SFCs, but when a user tries to connect any kind of class based component, there's a type mismatch error.

import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import { AppState } from './store';

interface AppProps {
  foo: string;
}

class App extends Component<AppProps,{}> {
  render() {
    return (
      <div className="app-component">hello{this.props.foo}</div>
    )
  }
}

const mapStateToProps = (state: AppState) => ({
    todos: state.todos
});
export default connect(mapStateToProps)(App);

I get the following error

src/app.tsx(25,47): error TS2345: Argument of type 'typeof App' is not assignable to parameter of type 'AnyComponent<{ todos: { id: string; text: string; }[]; } & DispatchProp<any>, {}>'.
  Type 'typeof App' is not assignable to type 'FunctionalComponent<{ todos: { id: string; text: string; }[]; } & DispatchProp<any>>'.
    Type 'typeof App' provides no match for the signature '(props?: ({ todos: { id: string; text: string; }[]; } & DispatchProp<any> & ComponentProps<FunctionalComponent<{ todos: { id: string; text: string; }[]; } & DispatchProp<any>>>) | undefined, context?: any): Element'.

There are at least two things that need to be fixed in order for typescript to be used with this library in strict/no-implicit-any mode

• [x] Make Provider#props an optional property - #22
• [x] Fix the AnyComponent type definition so that it works with more than just functional components - https://github.com/developit/preact/pull/905

[mike-north]

Looks like there's an issue open for preact https://github.com/developit/preact/issues/903

[mike-north]

the AnyComponent issue has been resolved via developit/preact#905. Now we just need #22 merged and this library can be used in a more strict typescript configuration.

[ameliemaia]

As a workaround for now I'm doing export default connect(mapStateToProps, {})(WebGL as any);. I'd appreciate a fix soon though.

[developit]

Merged #22.