使用 react-redux 连接功能时渲染组件上的打字稿错误答案

【问题标题】：Typescript error on rendered component when using react-redux connect function使用 react-redux 连接功能时渲染组件上的打字稿错误
【发布时间】：2018-06-27 01:55:58
【问题描述】：

我有一个组件类，我正在使用 react-redux 连接 redux 存储，但是当我尝试将组件传递给连接函数时出现错误。

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

这些是我正在使用的每个接口（除了来自 redux 的 Dispatch）：

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：组件将使用的所有类型

IFilePassedProps：这些是从父组件传入组件的props，所以我在渲染的组件元素上看不到打字问题。

IFileItemReduxState：从 react-redux 传递给 mapStateToProps 的状态。

IFileItemReduxProps：从 react-redux 的 mapStateToProps 返回的 props。

IFileItemDispatchProps：从 react-redux 的 mapDispatchToProps 返回的 props。

据我了解，连接函数的类型如下：

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

但是当我这样做时，我收到如下错误：

【问题讨论】：

标签： reactjs typescript redux react-redux

【解决方案1】：

乍一看，我发现你的 IFileItemProps 和 IFileItemReduxProps 接口中属性 'fileExplorerInfo' 的类型是不同的。

你的意思是说 FileDirectoryTree 或 FileExplorerReducerState 的类型吗？

话虽如此，我遇到了一个类似的问题，即我的组件签名不匹配。幸运的是我没有传递道具，所以我把它修好了

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

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

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

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

希望这会有所帮助:)

【讨论】：