javascript - 强烈键入带有 typescript 的react-redux connect

我在尝试为我的react组件键入参数时遇到错误。我想简单地输入组件的属性和状态上的属性，但是当我使用Redux进行操作时，将mapStateToProps传递给connect函数时出现错误。

这是组件代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import FileExplorer from '../components/file-explorer/file-explorer';
import { ISideMenu, ISideMenuState } from '../models/interfaces/side-menu';

    class SideMenu extends Component<ISideMenu, ISideMenuState> {
        render() {
            return (
                <div>
                    {this.props.fileExplorerInfo !== null &&
                        <FileExplorer fileExplorerDirectory={this.props.fileExplorerInfo.fileExplorerDirectory}/>
                    }
                </div>
            );
        }
    }

    const mapStateToProps = (state: ISideMenuState) => {
        return {
            fileExplorerInfo: state.fileExplorer
        };
    };

    export default connect<ISideMenu, null, ISideMenuState>(mapStateToProps)(SideMenu);

因此，此行会发生错误:

export default connect<ISideMenu, null, ISideMenuState>(mapStateToProps)(SideMenu);

当我将鼠标悬停在该行中的单词“mapStateToProps”上时，我看到了错误:

Argument of type '(state: ISideMenuState) => { fileExplorerInfo: FileDirectoryTree | null; }'
is not assignable to parameter of type 'MapStateToPropsParam<ISideMenu, ISideMenuState, {}>'.
  Type '(state: ISideMenuState) => { fileExplorerInfo: FileDirectoryTree | null; }' is not
assignable to type 'MapStateToProps<ISideMenu, ISideMenuState, {}>'.
    Types of parameters 'state' and 'state' are incompatible.
      Type '{}' is not
assignable to type 'ISideMenuState'.
        Property 'fileExplorer' is missing in type '{}'.

这是我在react组件中使用的两个接口(interface):

export interface ISideMenu {
    fileExplorerInfo: FileExplorerReducerState | null;
}

export interface ISideMenuState {
    fileExplorer: FileDirectoryTree | null;
}

任何对此错误的见解将不胜感激!

最佳答案

使用泛型时，您将错误的接口(interface)位置:

在声明您的React组件时:

class Comp extends Component<ICompProps, ICompState>

使用ICompProps和ICompState分别是组件的 Prop 和内部状态。

使用连接时:

connect<IMapStateToProps, IMapDispatchToProps, ICompProps, IReduxState>

IMapStateToProps代表mapStateToProps()函数返回的内容。IMapDispatchToProps代表mapDispatchToProps()函数返回的内容。ICompProps代表您的React组件 Prop (与上面相同)IReduxState代表您应用的Redux状态

因此，在您的特定示例中:

在声明您的React组件时:

class SideMenu extends Component<ISideMenu, {}>

因为您不使用任何状态，所以将ISideMenu用于 Prop ，并将{}(空状态)用作状态。

使用连接时:

connect<ISideMenu, {}, ISideMenu, ISideMenuState>(mapStateToProps)(SideMenu);

您可以将ISideMenu用作您的React组件 Prop 和mapStateToProps返回的对象。但实际上，最好创建两个单独的接口(interface)。

在我的应用程序中，通常不必打扰键入mapStateToProps返回对象，因此我只需使用:

connect<{}, {}, ISideMenu, ISideMenuState>(mapStateToProps)(SideMenu);

关于javascript - 强烈键入带有 typescript 的react-redux connect，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48292707/