Question

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

我在其他地方定义了LoggedInUserState类型，它在文件中像这样导出：

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;

这是我的tsx文件：

class MyClass
{
    public MyClass(IService service)
    { 
        this.Service = service;
    }

    public MyClass() : this(new Service())
    {
    }
}

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

“'类型的参数（状态：LoggedInUserState，originalProps：LinkProps） => ExpandedAuthProps'不能分配给'MapStateToPropsParam'类型的参数。输入'（state： LoggedInUserState，originalProps：LinkProps）=> ExpandedAuthProps'为不可分配给“ MapStateToPropsFactory”类型。参数“ originalProps”和“ ownProps”的类型不兼容。输入“ LinkProps | undefined”无法分配给“ LinkProps”类型。无法将“未定义”类型分配给“ LinkProps”类型。

声明有什么问题？

Answer 1

我无法重现您收到的错误；我得到了另一个。这为我编译：

export default connect(mapStateToProps)(AuthenticatedLink);

如果我正确理解react-redux，则不应将结果断言为typeof AuthenticatedLink。 connect的全部要点是它将组件的道具类型从ExpandedAuthProps更改为LinkProps，因为LoginStateProps部分由您的mapStateToProps函数提供

打字稿Redux连接的组件类型错误

1 个答案: