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

我正在构建一个react/redux/typescript应用程序。我连接的组件在VS代码（和Visual Studio）中都显示了一个TypeScript错误，但应用程序可以编译并工作（webpack成功）

我想了解我为什么会看到这个错误，如果可能的话，把它处理掉

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

[ts]类型为“typeof UserLogin”的参数不可分配给 “组件”类型的参数。类型“typeof UserLogin”不正确 可分配给类型“无状态组件”。 类型“typeof UserLogin”未提供与签名匹配的内容“（props:{children？：ReactNode；}，context？：any）：ReactElement |空'

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

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;

错误的屏幕截图：

---

我想我发现了问题：组件类构造函数的

props

参数应该是可选的，即

构造函数（props？：LoginProps）

。如果我做了改变，那么错误就会消失。我不确定类型是否准确，考虑参数可选，但我猜解决方案是与它们一致。

---

FWIW，我的印象也是，

作为UserLogin的类型

没有意义。我无法解释为什么删除它会改变运行时的行为，因为TypeScript会删除类型信息。

对于其他正在努力解决TypeScript/redux和TS类型错误的人来说，我找到了一个非常好的项目启动程序，它创建了一个干净的应用程序，并带您逐步添加组件和容器。通过遵循它，我能够创建一个没有类型映射错误的应用程序，并且可以干净地进行lints

---

这是指向回购的链接，并附有说明：

AppThunkAction的定义是什么？我在没有它的情况下复制问题时遇到了困难。这里是：导出接口AppThunkAction{（dispatch:（action:TAction）=>void，getState:（）=>ApplicationState）：void；}@MattMcCutchen我想我的库版本可能也会影响一些事情？我正在用我的react库版本更新这个问题您在哪一行得到错误？@TitianCernicova Dragomir位于组件的最后一行（我称之为connect（））函数。我添加了一个屏幕截图谢谢，我真的很感谢你的努力。我做了那个更改，但所发生的只是错误消息发生了轻微的变化。它不再按照我的屏幕截图引用ReactElement，而是现在只显示ReactElement。你可以把你的复制项目放到Github中，这样我就可以在我的页面上查看它了吗租赁？太棒了，谢谢。是的，在你的项目中，我的机器上也出现了验证错误。一定是我的主项目的其他原因造成的。我将从我的项目中逐个添加npm包，直到错误再次出现，然后我至少会知道是什么原因造成的。我现在接受你的答案

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

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

"@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",