Typescript validation error on connected redux component

Question

I am building a react / redux / typescript application. My connected components all show a TypeScript error in VS Code (and Visual Studio), but the app compiles and works (webpack succeeds).

I would like to understand why I am seeing this error and get rid of it if possible.

In all my connected components, when I export the default type with the connect function, I see a warning that the component I am exporting doesn't comply to a specific interface. This is an example of the full error message:

[ts] Argument of type 'typeof UserLogin' is not assignable to parameter of type 'Component<{}>'. Type 'typeof UserLogin' is not assignable to type 'StatelessComponent<{}>'. Type 'typeof UserLogin' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement< any> | null'

Here is the applicable component code in full:

import { connect, Dispatch } from 'react-redux';
import * as React from 'react';
import { UserRole } from '../model/User';
import { RouteComponentProps } from 'react-router-dom';
import * as LoginStore from '../store/LoggedInUser';
import { ApplicationState } from 'ClientApp/store';

type DispatchProps = typeof LoginStore.actionCreators;
type LoginProps = DispatchProps & RouteComponentProps<{}>;

interface LoginFields {
    userName: string,
    password: string
}

class UserLogin extends React.Component<LoginProps, LoginFields> {

    constructor(props: LoginProps) {
        super(props);

        this.state = {
            userName: '',
            password: ''
        }

        this.userNameChange = this.userNameChange.bind(this);
        this.pwdChange = this.pwdChange.bind(this);
    }

    userNameChange(e: React.ChangeEvent<HTMLInputElement>) {
        this.setState({ userName: e.target.value, password: this.state.password });
    }

    pwdChange(e: React.ChangeEvent<HTMLInputElement>) {
        this.setState({ userName: this.state.userName, password: e.target.value });
    }

    public render() {
        return <div>
            <h1>User Login</h1>
            <div className="form-group">
                <label htmlFor="exampleInputEmail1">Email address</label>
                <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    placeholder="Enter email" value={this.state.userName} onChange={this.userNameChange} />
            </div>
            <div className="form-group">
                <label htmlFor="exampleInputPassword1">Password</label>
                <input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password"
                    value={this.state.password} onChange={this.pwdChange} />
            </div>
            <button type="submit" className="btn btn-primary"
                onClick={() => this.props.login(this.state.userName, this.state.password)}>Login</button>
        </div>;
    }
}

// Wire up the React component to the Redux store
export default connect(
    null, LoginStore.actionCreators
)(UserLogin) as typeof UserLogin;

and here is the definition of the action creators:

export const actionCreators = {
    login: (userName: string, pass: string): AppThunkAction<Action> => (dispatch, getState) =>
    {
        var loggedIn = false;

        axios.post('api/Auth/', {
            UserName: userName,
            Password: pass
        }).then(function (response) {
            let tokenEncoded = response.data.token;
            let tokenDecoder = new JwtHelper();
            let token = tokenDecoder.decodeToken(tokenEncoded);
            let usr = new User(userName, JSON.parse(token.userRoles), token.fullName, tokenEncoded);
            dispatch(<LoginUserAction>{ type: 'LOGIN_USER', user: usr });
            dispatch(<RouterAction>routeThings.push('/'));            
        }).catch(function (error) {
            let message = 'Login failed: ';
            if (error.message.indexOf('401') > 0) {
                message += ' invalid username or password';
            } else {
                message += error.message;
            }
            toasting.actionCreators.toast(message, dispatch);
        });
    },
    logout: () => <Action>{ type: 'LOGOUT_USER' }
};

definition of AppThunk:

export interface AppThunkAction<TAction> {
    (dispatch: (action: TAction) => void, getState: () => ApplicationState): void;
}

I am using TypeScript 3.0.1

Possibly relevant versions from my package.json:

"@types/react": "15.0.35",
"@types/react-dom": "15.5.1",
"@types/react-hot-loader": "3.0.3",
"@types/react-redux": "4.4.45",
"@types/react-router": "4.0.12",
"@types/react-router-dom": "4.0.5",
"@types/react-router-redux": "5.0.3",

"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",

Screenshot of the error:

Answer 1

I think I found the problem: the React version 15 typings expect the props parameter to a component class constructor to be optional, i.e., constructor(props?: LoginProps). If I make that change, then the error goes away. I'm not sure whether the typings are accurate to consider that parameter optional, but I guess the solution is to be consistent with them.

FWIW, my impression too is that the as typeof UserLogin doesn't make sense. I can't explain why removing it would change runtime behavior since TypeScript erases type information.

Answer 2

For anybody else that is struggling with typescript / redux and TS type errors, I found a really good project starter that creates a clean app and takes you through the steps to add components and containers piece by piece. By following it, I was able to create an app that has no type mapping errors, and lints cleanly.

This is the link to the repo with instructions: https://github.com/Microsoft/TypeScript-React-Starter