连接的redux组件上的Typescript验证错误

我正在构建一个react / redux / typescript应用程序 . 我的连接组件都在VS Code（和Visual Studio）中显示TypeScript错误，但应用程序编译并运行（webpack成功） .

我想了解为什么我看到这个错误并尽可能摆脱它 .

在我所有连接的组件中，当我使用connect函数导出默认类型时，我看到一个警告，即我导出的组件不符合特定的接口 . 这是完整错误消息的示例：

[ts]类型'typeof UserLogin'的参数不能分配给'Component <{}>'类型的参数 . 类型'typeof UserLogin'不能分配给'StatelessComponent <{}>' . 类型'typeof UserLogin'不提供签名'（props：{children？：ReactNode;}，context？：any）：ReactElement <any> |空值'

以下是完整的适用组件代码：

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;

这是动作创建者的定义：

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' }
};

AppThunk的定义：

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

我正在使用TypeScript 3.0.1

可能来自我的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",

错误的屏幕截图：