Typescript react/redux

Question

Getting error

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...'.

But interfaces provided

Component where i getting errors

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

Component where intefaces provided

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);

How to resolve this conflict? I have similar errors with few components too Why it does not work as expected?

Hope your help!

Nitzan Tomer · Accepted Answer · 2017-03-18 22:07:23Z

My guess is that when you use the NotificationTypes component you're using this:

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

From the definition file of react-dedux it seems that the connect function has two signatures.
The first isn't generic and returns InferableComponentDecorator:

export declare function connect(): InferableComponentDecorator;

But the second is generic and can be used to return the generic 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>;

I haven't used it, but you should probably do something like:

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

Collectives™ on Stack Overflow

Typescript react/redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related