[英]Typescript React Component - Correct way to do redux prop types to stop TS warnings
如果你有一个 React 组件:
interface Chat {
someId: string;
}
export const Chat = (props: Chat) => {}
并且someId
在您的mapStateToProps
中设置:
function mapStateToProps(state: State) {
return {
someId: state.someId || ''
};
}
当我 go 使用此组件时<Chat />
我不需要指定someId
因为它是由 redux 注入的。但是,typescript 抱怨is missing the following properties type 'Chat': 'someId'
一个讨厌的解决方法是使someId
可选:
interface Chat {
someId?: string;
}
但这意味着您必须检查组件是否以某种方式存在于组件中。
执行此操作的正确方法是什么?
您可以为 mapstate 和 mapdispatch 定义接口。 并使用&
运算符获取组件 Prop 类型。
interface StateProps {
someId: string;
}
interface DispatchProps {
someDispatch: () => void
}
type Props = StateProps & DispatchProps
const mapState = (state: State) => ({
someId: state.someId || ''
})
const mapDispatch = {
someDispatch: () => ({ type: 'SOME_ACTION_TYPE' })
}
const Chat = (props: Props) => {}
export default connect<StateProps, DispatchProps>(
mapState,
mapDispatch
)(Chat)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.