Typescript redux连接的组件类型错误

我试图将redux中的状态合并到tsx文件中定义的react组件中的属性中

我在别处定义了LoggedInUserState类型，它在其文件中导出如下：

import { Action, Reducer } from 'redux';

// -----------------
// STATE - This defines the type of data maintained in the Redux store.

export interface LoggedInUserState {
    userName: string,
    isAdmin: boolean,
    isUserManager: boolean
}

这是我的tsx文件：

import * as React from 'react';
import { connect } from 'react-redux';
import { LoggedInUserState } from 'ClientApp/store/LoggedInUser';
import { NavLink } from 'react-router-dom';


export interface LinkProps {
    routeTo: string,
    name: string,
    glyphIcon: string
}

interface LoginStateProps {
    isAuthenticated: boolean
}

type ExpandedAuthProps =
    LinkProps & LoginStateProps;

class AuthenticatedLink extends React.Component<ExpandedAuthProps, null> {

    public render() {
        return this.props.isAuthenticated ?
            <NavLink exact to={this.props.routeTo} activeClassName='active'>
                <span className={this.props.glyphIcon}></span> {this.props.name}
            </NavLink> : 
            <NavLink exact to={'/loginUser'} activeClassName='active'>
                <span className='glyphicon glyphicon-ban-circle'></span> {this.props.name}
            </NavLink>;
    }
}

function mapStateToProps(state: LoggedInUserState, originalProps: LinkProps): ExpandedAuthProps {
    return {
        routeTo: originalProps.routeTo,
        name: originalProps.name,
        glyphIcon: originalProps.glyphIcon,
        isAuthenticated: state.userName != ''
    }
}

export default connect<LoggedInUserState, {}, LinkProps>
    (mapStateToProps)(AuthenticatedLink) as typeof AuthenticatedLink;

import*as React from'React'；
从'react redux'导入{connect}；
从'ClientApp/store/LoggedInUser'导入{LoggedInUserState}；
从'react router dom'导入{NavLink}；
导出接口链接道具{
routeTo:字符串，
名称：string，
字形图标：字符串
}
接口LoginStateProps{
isAuthenticated:布尔值
}
类型ExpandedAuthProps=
LinkProps和LoginStateProps；
类AuthenticatedLink扩展了React.Component{
公共渲染（）{
是否返回此.props.isAuthenticated？
{this.props.name}
: 
{this.props.name}
;
}
}
函数MapStateTops（状态：LoggedInUserState，原始Props:LinkProps）：ExpandedAuthProps{
返回{
routeTo:originalProps.routeTo，
名称：originalProps.name，
glyphIcon:originalProps.glyphIcon，
isAuthenticated:state.userName！=''
}
}
导出默认连接
（mapStateToProps）（AuthenticatedLink）作为AuthenticatedLink的类型；

TypeScript在我的tsx文件的最后一行（MapStateTops）上显示以下类型错误：

import * as React from 'react';
import { connect } from 'react-redux';
import { LoggedInUserState } from 'ClientApp/store/LoggedInUser';
import { NavLink } from 'react-router-dom';


export interface LinkProps {
    routeTo: string,
    name: string,
    glyphIcon: string
}

interface LoginStateProps {
    isAuthenticated: boolean
}

type ExpandedAuthProps =
    LinkProps & LoginStateProps;

class AuthenticatedLink extends React.Component<ExpandedAuthProps, null> {

    public render() {
        return this.props.isAuthenticated ?
            <NavLink exact to={this.props.routeTo} activeClassName='active'>
                <span className={this.props.glyphIcon}></span> {this.props.name}
            </NavLink> : 
            <NavLink exact to={'/loginUser'} activeClassName='active'>
                <span className='glyphicon glyphicon-ban-circle'></span> {this.props.name}
            </NavLink>;
    }
}

function mapStateToProps(state: LoggedInUserState, originalProps: LinkProps): ExpandedAuthProps {
    return {
        routeTo: originalProps.routeTo,
        name: originalProps.name,
        glyphIcon: originalProps.glyphIcon,
        isAuthenticated: state.userName != ''
    }
}

export default connect<LoggedInUserState, {}, LinkProps>
    (mapStateToProps)(AuthenticatedLink) as typeof AuthenticatedLink;

类型为“”的参数（状态：LoggedInUserState，originalProps:LinkProps） =>ExpandedAuthProps'不可分配给“MapStateToPropsParam”类型的参数。类型“（状态： LoggedInUserState，originalProps:LinkProps）=>ExpandedAuthProps'是 不可分配给类型“MapStateTopsFactory”。 参数“originalProps”和“ownProps”的类型不兼容。 “LinkProps | undefined”类型不能分配给“LinkProps”类型。 类型“undefined”不可分配给类型“LinkProps”

---

声明有什么问题吗？

我无法重现您得到的错误；我有一个不同的。这为我汇编了：

export default connect(mapStateToProps)(AuthenticatedLink);

如果我正确理解react-redux，您不应该将结果断言回

typeof AuthenticatedLink

。

connect

的整个要点在于，它将组件的道具类型从

ExpandedAuthProps

更改为

LinkProps

，因为

LoginStateProps

部分由

mapstatetrops

函数提供