您如何注释返回状态切片的函数的流类型？答案

【问题标题】：How do you annotate a flowtype of a function that returns a slice of state?您如何注释返回状态切片的函数的流类型？
【发布时间】：2019-03-15 18:07:31
【问题描述】：

背景：

目前，我的registerOneTarget 方法被注释为返回整个LazyloadProviderState，这是错误的，因为它只返回完整状态的一部分。我的registerOneTarget 方法接受一个目标并返回一个返回状态切片的函数。

问题：

Inflow 如何注释较大类型的单个键（LazyloadProviderState）？换句话说，我们怎样才能显式键入LazyloadProviderState.targets，而不是注释整个LazyloadProviderState 类型？

状态+类型：

export type LazyloadProviderState = {
  targets?: TargetHash,
  otherProps: any,
  id: number,
  meta: any,
};

export type Hash = string;

export type TargetHashMap = {
  [key: Hash]: Target,
};

export type Target = {
  key: Hash,
  current: Node,
  visibility: boolean,
};

返回类型有问题的函数：

static registerOneTarget(
    target
  ) : (LazyloadProviderState => LazyloadProviderState) // wrong!
  {
    return ps => {
      return {
        targets: {
          ...ps.targets,
          ...LazyloadProvider.createElement(target),
        },
      };
    };
  }

如果对理解有帮助的话，全课

 class LazyloadProvider extends Component<
  LazyloadProviderProps,
  LazyloadProviderState
> {
  constructor(props) {
    super(props);
    this.state = {targets: {}};
  }

  static createHash(): Hash {
    let d, r;
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      r = (new Date().getTime() + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
    });
  }

  static createElement(target): TargetHash {
    const key = LazyloadProvider.createHash();
    const visibility = false;
    return {
      [key]: {
        ...target,
        key,
        visibility,
      },
    };
  }

  static registerOneTarget(
    target
  ): LazyloadProviderState => LazyloadProviderState {
    return ps => {
      return {
        targets: {
          ...ps.targets,
          ...LazyloadProvider.createElement(target),
        },
      };
    };
  }

  get engine() {
    return {
      state: this.state,
      register: target => {
        this.setState(LazyloadProvider.registerOneTarget(target));
      },
      deregister: target => {},
    };
  }

  render() {
    return (
      <LazyloadContext.Provider value={this.engine}>
        {this.props.children}
      </LazyloadContext.Provider>
    );
  }
}

【问题讨论】：

标签： javascript reactjs flowtype typing static-typing

【解决方案1】：

你可以试试$Shape:

复制所提供类型的形状，但将每个字段标记为可选。

所以你的函数注释将是：

LazyloadProviderState => $Shape<LazyloadProviderState>

其他（我想更直接）解决方案可能是将返回的状态提取为单独的类型：

export type LazyloadProviderPartialState = {
  targets?: TargetHash,
};

接下来您可以将完整类型定义为包含部分类型：

export type LazyloadProviderState = { 
  otherProps: any,
  id: number,
  meta: any,
} & LazyloadProviderPartialState;

然后定义函数就变得很容易了：

LazyloadProviderState => LazyloadProviderPartialState;

【讨论】：

【解决方案2】：

最好明确说明您要返回的状态的哪一部分 - {targets: TargetHash}

export type LazyloadProviderState = {
  targets?: TargetHash,
  otherProps: any,
  id: number,
  meta: any,
};

static registerOneTarget(
    target
  ) : (LazyloadProviderState => {targets: TargetHash})
  {
    return ps => {
      return {
        targets: {
          ...ps.targets,
          ...LazyloadProvider.createElement(target),
        },
      };
    };
  }

【讨论】：