Issue 1:
I tried using the @types/react-redux package and had problems.

I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript

I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).

Mention the authors (see Definitions by: in index.d.ts) so they can respond.

Authors: @tkqubo, @seansfkelley @thasner

When using connect() in a React.Component, it loses its props when creating the element using TSX.

for example:

import React from 'react'
import { connect } from 'react-redux'
import { State } from '../actions'

export interface RemoteFilterProps {
name: string;
access: string;
group: string;
onSelect: FilterProps['onSelect'];
}

export class RemoteFilter extends React.Component<RemoteFilterProps, RemoteFilterState> {
/* ... */
}

export default connect((state: State): Partial<RemoteFilterProps> => {
return {
access: state.access
}
})(RemoteFilter)

when using it, it shows no props:

import RemoteFilter from './remotefilter'

export default (<RemoteFilter />) // nothing is enforced

my work around is using:

export default connect((state: State) => {
return {
access: state.access
}
})(RemoteFilter) as React.ComponentClass<RemoteFilterProps>

Issue 2:
There is an issue with the react-redux typings such that if you leave out the TOwnProps parameters to both mapStateToProps and mapDispatchToProps, you can end up with a wrapped component that will freely accept any set of props (literally anything). This issue is with the newest version of react-redux as of this writing; which were last touched 56295f5.

So here's a snippet that erroneously compiles fine:

interface OwnProps {
foo: string;
}

interface ConnectedProps {
bar: string;
}

class FooComponent extends React.Component<OwnProps & ConnectedProps, {}> {
render() {
return <div/>;
}
}

function mapStateToProps(state: any): ConnectedProps {
return {
bar: 'baz'
};
}

const WrappedFoo = connect(mapStateToProps)(FooComponent);

// Missing `foo` but also specifying unknown property `quux`; this compiles fine.
React.createElement(WrappedFoo, { quux: 10 });

You can work around it by typecasting the result of connect, and everything works as expected:

const WrappedFoo = connect(mapStateToProps)(FooComponent) as React.ComponentClass<OwnProps>;

Or you can mention OwnProps in mapStateToProps:

function mapStateToProps(state: any, ownProps: OwnProps): ConnectedProps {
return {
bar: 'baz'
};
}

const WrappedFoo = connect(mapStateToProps)(FooComponent);

A couple definitions:

OwnProps: This is the type of the parameters that the connected version of the component accepts. That is, those that the parent must provide that aren’t auto-injected.

ConnectedProps: This is the type of the parameters that are selected by mapStateToProps. It’s not strictly necessary to the typings or the workaround, but it helps clarify when debugging since it allows you to properly type mapStateToProps.

What I think is happening here is that when the optional TOwnProps seen in the signature of mapStateToProps and mapDispatchToProps is absent (as it is in the example), Typescript falls back on inferring TOwnProps as {}. The output of the whole process (after running connect) thus ends up as React.ComponentClass<{}>, at which point all bets are off, since {} accepts anything and everything.

For similar reasons, you also shouldn't specify something very lenient for OwnProps, such as the empty interface, which is functionally identical to {}. The only workaround for explicitly specifying "no own props" as far as I can tell is to use the typecast method to cast it to React.ComponentClass<void> (though probably with an intermediate any cast, since Typescript doesn't accept the void cast).

I tried to tweak the typings to fix this, but I wasn't able to find a better way to define TOwnProps. Thoughts, @tkqubo (as the listed maintainer)?