打字稿反应/redux答案

【问题标题】：Typescript react/redux打字稿反应/redux
【发布时间】：2017-03-18 21:37:06
【问题描述】：

遇到错误

ERROR in [at-loader] ./src/app/components/partials/userPartial.tsx:101:33 TS2339: Property 'level' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & { children?: Reac...'.

ERROR in [at-loader] ./src/app/components/partials/userPartial.tsx:102:33 TS2339: Property 'medal' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & { children?: Reac...'.

但是提供了接口

出现错误的组件

<NotificationTypes
   level={item.level}
   medal={item.medal}
   referred={item.user}
   points={item.points}
   type={item.type}
/>

提供接口的组件

export interface IPoints {
    earned: number,
    total: number
}

export interface INotificationTypesProps {
    level: any,
    medal: any,
    points: IPoints,
    type: number,
}

class NotificationTypes extends React.Component<INotificationTypesProps , any> {
    constructor(props:any){
        super(props);
    }


    render(){

        const { type, level, points, medal} = this.props;

        switch(type) {
            case 132:
                return (
                    <span>
                        <Translate value="notification.earned"/> <div
                        className='notify-medal medal-sm-yellow'>{medal}</div>
                    </span>
                );
            case 131:
                return (
                    <span>
                        <Translate value="notification.received"/> {points.earned} <Translate
                        value="notification.pointScored"/>
                        &nbsp;{points.total} <Translate value="notification.points"/>
                    </span>
                );
            default:
                return <div />
        }
    }
}

const mapStateToProps = (state) => {
    return {
        _CONFIG: state._CONFIG.CDN.static_uri,
    };
};
export default connect(mapStateToProps, null)(NotificationTypes);

如何解决这个冲突？我也有类似的错误，组件很少为什么它不能按预期工作？

希望您的帮助！

【问题讨论】：

标签： javascript reactjs typescript redux

【解决方案1】：

我的猜测是，当您使用 NotificationTypes 组件时，您正在使用这个：

export default connect(mapStateToProps, null)(NotificationTypes);

从react-dedux的定义文件看来，connect函数有两个签名。
The first不是通用的，返回InferableComponentDecorator：

export declare function connect(): InferableComponentDecorator;

但是the second是泛型的，可以用来返回泛型的ComponentDecorator：

export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
    mapStateToProps?: FuncOrSelf<MapStateToProps<TStateProps, TOwnProps>>,
    mapDispatchToProps?: FuncOrSelf<MapDispatchToPropsFunction<TDispatchProps, TOwnProps> | MapDispatchToPropsObject>,
    mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps>,
    options?: Options
): ComponentDecorator<TStateProps & TDispatchProps, TOwnProps>;

我没用过，但你可能应该这样做：

export default connect<typeof mapStateToProps, {}, INotificationTypesProps >(mapStateToProps, null)(NotificationTypes);

【讨论】：