Question

我正在尝试在我的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会引发一个错误，指出位置类型显然不等于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}/>;
    }
}

Answer 1

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

如果您在执行此工作时遇到麻烦，请在问题中添加更多代码（至少是selectpicker类的声明）。

更新

根据示例代码，这是将onToggleItem添加到T的方法：

selectpicker.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}/>; } }中，TypeScript应该推断您的navigation.tsx元素正在使用<Selectpicker ... />。您还可以显式指定T = Location。

将React-Redux分派定义为通用函数属性会引发打字稿3.1.3

1 个答案:

更新