javascript - 将React-Redux分派(dispatch)定义为通用函数属性会引发 typescript 3.1.3错误

我正在尝试在我的React-Redux项目中升级我的打字稿依赖项（2.5.x> 3.1.3）。可悲的是并非没有问题：P

我有一个基本的selectpicker React组件，该组件期望一个函数属性为IdNameObject类型的参数：

onToggleItem: (item: IdNameObject) => void;

注入到函数prop中的实际函数是Redux分派函数，其带有扩展IdNameObject的接口的参数：

updateSelectedLocation: (location: Location) => void;
interface Location extends IdNameObject {...}

现在，Typescript会引发错误，指出Location类型显然不等于IdNameObject类型。

我尝试转换function属性以使其通用：

onToggleItem: <T extends IdNameObject>(item: T) => void

但是，这仍然会引发打字错误：

type '(location: Location) => void' is not assignable to type '<T extends IdNameObject>(item: T) => void'

知道在这种情况下我应该怎么做吗？



完整案例

我忽略了这种情况下并不需要的所有额外代码。

一方面，我有一个navigation.tsx：

interface Location extends IdNameObject {...}

interface Props {
    updateSelectedLocation: (location: Location) => void;
}

class Navigation extends React.Component<Props> {
    public render(): any {
        const {updateSelectedLocation} = this.props;
        return <Selectpicker onToggleItem={updateSelectedLocation}/>;
    }
}

function mapDispatchToProps(dispatch: DispatchType) {
    return {
        updateSelectedLocation: (location: Location) => {
            dispatch(updateSelectedLocation(location));
        },
    }
}

export default connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps)((Navigation as any));

另一方面，我有一个selectpicker.tsx：

接口位置扩展了IdNameObject {...}

interface Props {
    onToggleItem: (item: IdNameObject) => void;
}

export class Selectpicker extends React.Component<Props> {
    public render(): any {
        const {onToggleItem} = this.props;
        return <Dropdown contentOnToggleItem={onToggleItem}/>;
    }
}

最佳答案

通过在T上定义类型参数onToggleItem，您已经说过selectpicker组件的每个调用者都必须提供一个适用于每个onToggleItem的T实现。我想您想要的是，在构造selectpicker时，selectpicker组件的调用者选择要选择的对象的类型T，然后提供适用于该特定onToggleItem的T实现。为此，应该在selectpicker组件和包含T的props接口（如果使用的是）上的onToggleItem上定义onToggleItem，而不是在T本身上定义。

如果您无法执行此工作，请向问题中添加更多代码（至少是selectpicker类的声明）。

更新资料

根据示例代码，这是将selectpicker.tsx添加到navigation.tsx的方法：

interface Props<T extends IdNameObject> {
    onToggleItem: (item: T) => void;
}

export class Selectpicker<T extends IdNameObject> extends React.Component<Props<T>> {
    public render(): any {
        const {onToggleItem} = this.props;
        return <Dropdown contentOnToggleItem={onToggleItem}/>;
    }
}

然后，在<Selectpicker ... />中，TypeScript应该推断出T = Location元素正在使用<Selectpicker<Location> ... />。您也可以显式指定。

关于javascript - 将React-Redux分派(dispatch)定义为通用函数属性会引发 typescript 3.1.3错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52870344/