Тип Ошибка при использовании TypScript с React-Redux

Question

Я пытаюсь использовать response-redux с машинописным шрифтом, и я получаю ошибку типа, когда пытаюсь вставить реквизиты с помощью connect() и mapStateToProps.

Мой компонент выглядит следующим образом:

function mapStateToProps(state) { 
    return { 
     counter: state.counter 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     incr:() => { 
      dispatch({type: 'INCR', by: 2}); 
     }, 
     decr:() => { 
      dispatch({type: 'INCR', by: -1}); 
     } 
    }; 
} 




export default class Counter extends React.Component<HelloProps, any> { 
    render() { 
     return (
      <div> 
       <p> 
        <label>Counter: </label> 
        <b>#{this.props.counter}</b> 
       </p> 
       <button onClick={e => this.props.incr() }>INCREMENT</button> 
       <span style={{ padding: "0 5px" }}/> 
       <button onClick={e => this.props.decr() }>DECREMENT</button> 
     ); 
    } 
} 


export default connect(mapStateToProps, mapDispatchToProps)(Counter); 

магазин выглядит следующим образом

let store = createStore(
    (state:HelloState, action:HelloAction) => { 
     switch (action.type) { 
      case 'INCR': 
       return {counter: state.counter + action.by}; 
      default: 
       return state; 
     } 
    }, 

Наконец, я определил мои типы быть:

interface HelloProps { 
    counter?: number; 
    incr?:() => any; 
    decr?:() => any; 
} 

interface HelloState { 
    counter:number; 
} 

interface HelloAction { 
    type:string, 
    by:number; 
} 

Когда я пытаюсь скомпилируйте код. Я получаю следующую ошибку:

(39,61): error TS2345: Argument of type 'typeof Counter' is not assignable to parameter of type 'ComponentClass<{ counter: any; } & { incr:() => void; decr:() => void; }> | StatelessComponent<...'. 
    Type 'typeof Counter' is not assignable to type 'StatelessComponent<{ counter: any; } & { incr:() => void; decr:() => void; }>'. 
    Type 'typeof Counter' provides no match for the signature '(props?: { counter: any; } & { incr:() => void; decr:() => void; }, context?: any): ReactElement<any>' 

Интересно, что код все еще работает, даже если он выдает ошибку типа. Кроме того, изменение интерфейса prop компонента для любого решения также решает проблему. Кажется, что система типов не понимает, что эти два объекта объединены двумя отображаемыми функциями.

Answer 1

Я нашел ответ на второй по счету на этом Github issue. Без параметра типа на mapStateToProps и/или mapDispatchToProps или на connect он будет производить пересечение возвращаемых типов двух функций карты.

Answer 2

Чтобы сохранить безопасность типа вы можете разделить ваши реквизита в части, один ответственный за нормальный реквизит и один для диспетчеров:

import * as React from 'react'; 
import {connect} from 'react-redux'; 

interface StateProps { 
    textPros: string, 
    optionalText?: string, 

} 
interface DispatchProps { 
    onClick1: Function, 

} 

class MyComp extends React.Component<StateProps & DispatchProps , any> { 
    render() { 
     return (<div onClick={this.props.onClick1}>{this.props.textPros}</div>); 
    } 
} 
const mapStateToProps = (state: any, ownProp? :any):StateProps => ({ 
    textPros: "example text", 
}); 
const mapDispatchToProps = (dispatch: any):DispatchProps => ({ 
    onClick1:() => { 
     dispatch({ type: 'CLICK_ACTION'}); 
    } 
}); 
export default connect(mapStateToProps, mapDispatchToProps)(MyComp); 

Для тех, кто ищет для быстрого решения проблемы: просто добавить «как любые» для базового компонента ,

export default connect(mapStateToProps, mapDispatchToProps)(MyComp as any);