如何使用流键入 es6 生成器

Question

我的 react-native 应用程序中有以下（简化的）代码（我认为 react-native 无关紧要，但这是我发现错误的上下文）。

我正在尝试定义mystring 和gen 的类型以保持flow 快乐，但我找到的唯一解决方案是string|void，如下所示。下面的代码本身不会返回任何流错误，但是一旦我在其他地方使用mystring，我就会收到错误，因为应该是string，而不是void。我玩过各种组合，但没有运气。

我应该如何修改此代码以修复错误？

// @flow
import * as React from 'react';

type State = {
    mystring: string|void,
};

type genType = Generator<string, void, void>;

export default class Example extends React.Component<{}, State> {
    constructor(props: {}) {
        super(props);
        this.gen = this.makeGenerator();
        const { value } = this.gen.next();
        this.state = {
            mystring: value,
        };
    }

    gen: genType;

    * makeGenerator(): genType {
        yield 'somestring';
    }

    render() {
        const { mystring } = this.state;
        return mystring.charAt(0);
    }
}

编辑：

在上面的代码上运行flow 时，最后一行（这是强制流将mystring 视为字符串的示例）：

Cannot call mystring.charAt because property charAt is missing in undefined [1].
 [1]  5│     mystring?: string,

Answer 1

Generator 的引用类型类型参数如下所示：

interface Generator<+Yield,+Return,-Next>

当您调用next() 时，您会得到这种类型的结果：

type IteratorResult<+Yield,+Return> =
  | { done: true, +value?: Return }
  | { done: false, +value: Yield };

您可以在 done: true 案例中看到 Flow 假设结果中的 value 属性可能不存在。这意味着无论您如何键入生成器，Flow 都假定 value 的类型在这种情况下可能是 void。但在done: false 情况下，Flow 将使用您指定的任何类型作为生成器的Yield 类型。因此，您可以检查done 的值来细化value 的类型，如下所示：

const result = this.gen.next();
if (!result.done) {
  this.state = {
      mystring: result.value,
  };
}

对!result.done 的检查将result 的类型细化为{ done: false, +value: Yield }，从而为value 提供string 类型，而void 值不可能。

通过该更改，您可以更新状态类型以从 mystring 的类型联合中删除 void：

type State = {
    mystring: string,
};

上面Generator 和IteratorResult 的定义来自Flow 的标准类型定义，您可以在此处查看：

https://github.com/facebook/flow/blob/master/lib/core.js