Typescript redux 连接组件类型错误答案

【问题标题】：Typescript redux connected component type errorTypescript redux 连接组件类型错误
【发布时间】：2019-01-09 11:35:27
【问题描述】：

我正在尝试将来自 redux 的状态合并到 tsx 文件中定义的反应组件的属性中。

我已经在别处定义了 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;

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

类型的参数'（状态：LoggedInUserState，originalProps：LinkProps） => ExpandedAuthProps' 不可分配给“MapStateToPropsParam”类型的参数。输入'（状态： LoggedInUserState, originalProps: LinkProps) => ExpandedAuthProps' 是不可分配给类型“MapStateToPropsFactory”。参数 'originalProps' 和 'ownProps' 的类型不兼容。输入'LinkProps | undefined' 不可分配给类型 'LinkProps'。类型“未定义”不可分配给类型“LinkProps”。

声明有什么问题？

【问题讨论】：

标签： typescript react-redux

【解决方案1】：

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

export default connect(mapStateToProps)(AuthenticatedLink);

如果我正确理解 react-redux，您不应该将结果断言回 typeof AuthenticatedLink。 connect 的全部意义在于它将组件的 props 类型从 ExpandedAuthProps 更改为 LinkProps，因为 LoginStateProps 部分由您的 mapStateToProps 函数提供。

【讨论】：