javascript - 访问时出现流错误，可能在真实检查后定义的函数表达式中键入

Question

流 0.74.0

代码可在 flow 的基于网络的 REPL 上获得 here

Flow 在 theMethod 函数内的以下语句上标记错误:another(() => theArg.thing):

Cannot get theArg.thing because property thing is missing in null or undefined

代码:

type MyType = {
  thing: string
};

function aFunc(action: MyType){ console.log('in aFunc', action.thing);} ;

function another(callback: () => string) { console.log('in another', callback());};

function theMethod(theArg: ?MyType) {
  if (!theArg) return;

  aFunc(theArg);

  // flow doesn't complain about this
  console.log('in theMethod', theArg.thing);

  // flow doesn't like accessing theArg.thing in this arrow function
  another(() => theArg.thing);
}

虽然 theArg 可能是键入的，但 theMethod 在通过真实性检查之前不会访问 theArg。

使优化无效？

错误似乎不是流程 invalidating type refinement 的结果由于某些方法调用在真实检查后可能会影响 theArg。

Flow 并没有提示 theArg.thing 可能为 null/undefined，而是提示 theArg 在真实检查后可能为 null/undefined。虽然外部函数可以改变 theArg 引用的对象，但它不能更改 theArg 引用的对象。

我通过直接访问 theMethod 函数体中的 theArg 再次检查了这个预期:console.log('in theMethod', theArg.thing); 在调用一个单独的函数 (aFunc) 之后。 Flow 没问题。

吊装？

只有当我在 theMethod 的函数表达式中访问 theArg 时，Flow 才会提示，这让我认为它可能与提升有关。

我的 JS foo 不是很强大，但我认为这与这种情况无关。箭头函数被认为是一个函数表达式而不是一个声明，所以它不会被提升。我还确认如果我使用 es5 样式函数表达式而不是箭头函数，行为是相同的。

那么是什么给了？我是否遗漏了一些流程细化规则、误解了 JS，或者流程有误？

谢谢!

Answer 1

Flow 不知道 another 什么时候调用它的回调，所以它不能确定 theArg 在回调运行时没有变成 null .解决这个问题的一种方法是从 theArg 中取出 thing 并从回调中返回 thing 。这样，非空的 thing 就被绑定(bind)在回调的范围内:

( Try )

type MyType = {
  thing: string
};

function aFunc(action: MyType){ console.log('in aFunc', action.thing);} ;

function another(callback: () => string) { console.log('in another', callback());};

function theMethod(theArg: ?MyType) {
  if (!theArg) return;

  aFunc(theArg);

  // flow doesn't complain about this
  console.log('in theMethod', theArg.thing);

  // Now flow knows thing isn't null
  const {thing} = theArg
  another(() => thing);
}