Typescript error on rendered component when using react-redux connect function

Question

I have a component class that I am using react-redux to connect the redux store to, but I am getting an error when I try to pass the component into the connect function.

class FileItem extends Component<IFileItemProps, undefined> {
}

const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps => {
};

const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {
};

// This FileItem component passed into the below parameter is where I am getting the error

export default connect<IFileItemReduxProps, IFileItemDispatchProps, IFilePassedProps, IFileItemReduxState>(mapStateToProps, mapDispatchToProps)(FileItem);

These are each of the interfaces that I am using (except for Dispatch being from redux):

export interface IFileItemProps {
    file: FileDirectoryNode;
    fileExplorerInfo: FileExplorerReducerState;
    selectFile: (file: FileDirectoryNode) => void;
    openFile: (file: FileDirectoryNode) => void;
}

export interface IFilePassedProps {
    file: FileDirectoryNode;
}

export interface IFileItemReduxState {
    fileExplorer: FileDirectoryTree;
}

export interface IFileItemReduxProps {
    fileExplorerInfo: FileDirectoryTree;
}

export interface IFileItemDispatchProps {
    selectFile: (file: FileDirectoryNode) => void;
    openFile: (file: FileDirectoryNode) => void;
}

IFileItemProps: All the types that the component will utilize

IFilePassedProps: These are the props passed into the component from the parent, so I dont see typing issues on the rendered component element.

IFileItemReduxState: The state passed to mapStateToProps from react-redux.

IFileItemReduxProps: The props returned from mapStateToProps from react-redux.

IFileItemDispatchProps: The props that are returned from mapDispatchToProps from react-redux.

From what I understand the connect function is typed like so:

connect<TReturnedMapStateToProps = {}, TReturnedMapDispatchToProps = {}, TPassedFromOutsideProps= {}, TReduxState = {}>

But when I do that, I am getting the following error like so:

veeKINGPIN veeKINGPIN · Accepted Answer · 2018-01-18T08:59:48

At first glance, I found that the type of the property 'fileExplorerInfo' is different in your IFileItemProps and IFileItemReduxProps interfaces.

Did you mean the type to say FileDirectoryTree or FileExplorerReducerState?

That being said, I ran into a similar issue where my component's signature was not matching. Luckily for me I had no pass-through props so I fixed it like this

class FileItem extends Component<IFileItemProps &
                                 IFileItemReduxProps & 
                                 IFileItemDispatchProps, undefined> {}

const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps =>{};

const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {};

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

Hope this helps :)

Typescript error on rendered component when using react-redux connect function

1 Answers