Typoskript reagieren/Redux

Question

Erste Fehler

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

Aber Schnittstellen bereitgestellt

Komponente, wo ich Fehler immer

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

Component wo intefaces bereitgestellt

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

Wie diesen Konflikt zu lösen? Ich habe ähnliche Fehler mit wenigen Komponenten zu Warum funktioniert es nicht wie erwartet?

Hoffen Sie Ihre Hilfe!

Answer 1

Meine Vermutung ist, dass, wenn Sie die NotificationTypes Komponente verwenden Sie diese verwenden:

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

Aus der Definitionsdatei von react-dedux es scheint, dass die Verbindungsfunktion zwei Unterschriften hat.
The first ist nicht generisch und gibt InferableComponentDecorator:

export declare function connect(): InferableComponentDecorator; 

Aber the second generisch ist und verwendet werden kann, die generische ComponentDecorator zurückzukehren:

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

ich es nicht benutzt haben, aber Sie sollten wahrscheinlich etwas tun wie:

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