Add Explicit Props Interface from Store

When I use react-redux, the TS Compiler always throw an error:

1
error TS2339: Property '...' does not exist on type 'Readonly<children?: ReactNode; }> & Readonly<{}>'.

That’s because Connect was not supplying an explicit interface to the container component, so it was confused by the prop that it was trying to pass.

So you can add an explicit interface on child component.

1
2
3
4
5
6
7
8
interface PropsFromStore extends React.Props<any> {
  propsFromStore: any;
}

class ChildComponent extends React.Component<PropsFromStore, React.State> {
  // ...
}
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent)

Add Enhancer to Store with TS

When I use an enhancer like:

1
2
3
4
5
6
7
8
9
const enhancer = compose(
  applyMiddleware(...middlewares),
  DevTools.instrument(),
  persistState(
    window.location.href.match(
      /[?&]debug_session=([^&#]+)\b/
    )
  )
)

I got an error like:

1
2
[ts] Argument of type 'Function' is not assignable to parameter of type 'Func3<{}, {}, {}, {}, StoreEnhancerStoreCreator<{}>>'.
Type 'Function' provides no match for the signature '(a1: {}, a2: {}, a3: {}, ...args: any[]): {}'

To resolve this, just:

1
2
3
4
5
6
7
8
9
10
import { GenericStoreEnhancer } from 'redux'
const enhancer = compose(
  applyMiddleware(...middlewares),
  DevTools.instrument as GenericStoreEnhancer,
  persistState(
    window.location.href.match(
      /[?&]debug_session=([^&#]+)\b/
    )
  )
)