Question

我正在将TypeScript用于react-redux应用程序，我的redux状态类似于：


type State =
    {
      isCounting: true;
      count: number;
    }
  | {
      isCounting: false;
    };

react组件期望props具有相似的形状：

type StateToProps =
    {
      isCounting: true;
      count: number;
    }
  | {
      isCounting: false;
    };

然后将redux存储连接到react组件：

const ConnectedApp = connect<StateToProps, IDispatchToProps, {}, State>(
  (state: State): StateToProps =>
    state.isCounting
      ? {
          isCounting: true,
          count: state.count
        }
      : {
          isCounting: false
        },
  {
    increment,
    decrement
  }
)(App);

只要禁用strictFunctionTypes，一切都会起作用，如果启用了该功能，那么我在(App)部分的codeandbox上会遇到各种错误：

Property 'count' is missing in type 'Readonly<{ isCounting: false; } & IDispatchToProps> & Readonly<{ children?: ReactNode; }>' but required in type 'Readonly<{ isCounting: true; count: number; } & IDispatchToProps>'

当我尝试在VSCode中运行示例时，我得到：

Type 'boolean' is not assignable to type 'false'.

但是，我真的不想禁用该标记，并且不太了解，为什么map函数返回的并由react组件期望的并集类型不被解释为匹配。

是否有一种更清洁的方法来实现这种状态/属性结构而不禁用strictFunctionTypes标志，或者不对(App as any)进行调用而使connect变通？

或者一般来说，在redux存储中使用此类联合类型和props具有依赖于某些状态值的状态类型的想法不好吗？什么是更好的结构？

该问题的Codesandbox示例应用程序：https://codesandbox.io/s/lh7y5

TypeScript-strictFunctionTypes标志和联合类型

0 个答案: