Question

已阅读过几篇关于此的文章，但它们似乎并不适合我。我声明了两个接口。一个用于表示由父项传递的组件道具：

interface MyProps {
    name: string;
}

然后是另一个表示redux connect（）函数创建的props的接口：

interface DispatchProps {
    addData: (someData: any) => void;
}

所以为了得到合适的类型检查我的理解是我需要使用泛型来创建我的反应组件：

class MyComponent extends React.Component<MyProps, {}> {
    render() {
        return (
            <span onClick={this.props.addData}>{this.props.name}</span>
        };
    }

问题是打字稿现在很烦，因为this.props.addData不存在。所以我做了互联网告诉我的一个好小男孩并添加一个交集类型：

class MyComponent extends React.Component<MyProps & DispatchProps, {}> {}

但问题只是转移了，因为在父组件中，打字稿现在很难过，因为在我的渲染中我有：

render() {
    return (
        <MyComponent name="a name" />
    );
}

因为＆＃34;类型{}＆＃34;。

上缺少属性addData

那我在这里错过了什么？如何以一种允许我在组件中进行类型检查的方式将redux与反应的作用结合起来？

提前致谢。

Answer 1

事实证明问题不在于我的接口/泛型，问题在于我在父级中的import语句。我发布了答案，希望将来能帮助其他人。

我有：

import {MyComponent} from './MyComponent';

但这是导入COMPONENT CLASS而不是此行中生成的CONNECTED COMPONENT：

export default connect(mapStateToProps, mapDispatchToProps);

导入默认值并将正确的泛型添加到connect函数解决了我的问题。

打字稿Redux - 从调度道具中使用参数道具进行类型检查

1 个答案: