繁体   English   中英

Typescript React 组件 - 执行 redux 道具类型以停止 TS 警告的正确方法

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM