javascript - 为什么在这种情况下流会显示错误？

Question

我的代码:

/* @flow */

type Manager = {id: number, name: string};
type Target = {
  id: number,
  title: string,
};
type Form = {
  manager: ?Manager,
  target: ?Target,
}

const form: Form = {
  manager: {
    id: 1,
    name: 'test'
    },
  target: {
    id: 2,
    title: 'test'
  }
};

if (form.manager && form.target) {
  const managerId = +form.manager.id;
  const currentLimits = ([/* array from state*/].find(
    (limit) => limit.managersId === managerId,
  ) || {})
    .data || {};
  const { id: triggerId } = form.target; // <-- error here: "property `id` is missing in null or undefined [1]"
...
}

flow playground

Answer 1

这里的问题是 array.find 中存在回调，它使 if (form.manager && form.target) 语句之前完成的类型细​​化无效。

有关优化失效的更多信息 here

---

对此的快速修复是在细化之前将 target 提取到它自己的变量中:

const { manager, target } = form;

if (manager && target) {
  const managerId = +manager.id;
  const currentLimits = ([/* array from state*/].find(
    (limit) => limit.managersId === managerId,
  ) || {}).data || {};
  const { id: triggerId } = target;
}

Try

或者只是在 find 回调之前移动解构:

if (form.manager && form.target) {
  const managerId = +form.manager.id;
  const { id: triggerId } = form.target;
  const currentLimits = ([/* array from state*/].find(
    (limit) => limit.managersId === managerId,
  ) || {})
    .data || {};
}

Try