无法返回对象文字，因为null或未定义-流

Question

将mayBe类型与对象文字的可选属性混合

 type Response = {
        data?: string;
    }

 function length(): ?string {
      return undefined;
 }

 function test(): Response {
    const data = length()
    return {
        data
    }
 }

12:         data        ^ Cannot return object literal because null or undefined [1] is incompatible with string [2] in property `data`.
References:
5: function length(): ?string {
                      ^ [1]
2:     data?: string;
              ^ [2]

Test Flow

遵循MayBe types和Object Types的流程文档 我不确定为什么会收到错误，是否有办法解决？

Answer 1

类型和可选对象属性可能在流程中不太一样，并且并不总是兼容。

首先让我们看看您的Maybe Types的文档链接：

  

也许类型也接受提供的类型以及null或undefined。因此，?number的意思是number，null或undefined。

所以?number基本上是number | null | undefined。

现在让我们看一下“对象类型”链接from the docs：

  

除了它们的设置值类型之外，这些可选属性还可以为void或完全省略。但是，它们不能为null。

因此，如果我们进行type Response { data?: string }，则response.data实际上是 string | void。请注意，void是与null完全不同的类型。

现在让我们分解您的示例：

type Response = {
  data?: string; // void | string
}

function length(): ?string { // void | string | null
  return undefined;
}

function test(): Response {
  const data = length()
  // at this point, as far as flow knows, `data` can be `void`, `string`, or
  // `null`, and we're trying to set it as the `data` property on our
  // `Response` type which expects a `void` or a `string`, and does not
  // expect a `null`.
  return {
    data
  }
}

所以基本上，Response.data期望void | string，而您正在尝试将其设置为void | string | null。必须在某处更改类型，以便您成功完成操作。有多种可能的方法：

Option one，将length的返回值更改为更具体。可能是最简单的：

function length(): void | string {
  return undefined;
}

我们消除了data是null的可能性，因此不再出现类型错误。

Option two，将Response.data设为

如果它们都是可能的类型，那么问题就消失了。最小的更改可能是以下内容：

type Response = {
    data?: string | null;
}

我们刚刚添加了Response.data为null的可能性。现在它可以接受length的返回类型，类型匹配，没有错误。但这有点令人困惑，将null与可选属性结合在一起。我们可以这样做：

type Response = {
    data: ?string,
}

Option three，优化类型：

function test(): Response {
  const data = length()
  // at this point response.data is `void`
  const response = {};
  if (data) {
    // data is now a `number`, not `number | void | null`
    response.data = data;
  }
  // response.data is now `number | void` (not `null`)

  return response
}

使用哪种选项的决定几乎完全取决于最佳API，以解决当前遇到的问题，还可能取决于样式上的选择（通常是如何处理可选类型还是可能是类型）。