Question

我正在使用BroadcastChannel将数据从一个浏览器窗口传递到另一个浏览器窗口。但是，使用Flow时出现以下错误： Flow：混合[1]中缺少属性'type'。

这是我的代码：

const channel = new BroadcastChannel('background');
channel.onmessage = ({ data }) => {
  if (data.type === 'OK') {
    this.setState({ isLoading: false, success: true, error: false });
  }
  else if (data.type === 'ERROR') {
    this.setState({ isLoading: false, success: false, error: true });
  }
};

我也试图这样定义自己的类型：

type MessageType = {
  type: String,
  payload: String,
};

...

channel.onmessage = ({ data }: { data: MessageType }) => {
  if (data.type === 'OK') {
    this.setState({ isLoading: false });
  }

  if (data.type === 'ERROR') {
    alert('ERROR!');

    this.setState({ isLoading: false });
  }
};

但是随后Flow给我以下错误： Flow：无法将函数分配给channel.onmessage，因为MessageType的[1]与第一个参数的属性data的混合[2]不兼容。

我发现消息处理程序传递的参数是这样声明的：

declare class MessageEvent extends Event {
  data: mixed;
  origin: string;
  lastEventId: string;
  source: WindowProxy;
}

因此，如果声明数据为混合类型，但我需要将其作为自定义类型，那我该怎么做？

Answer 1

类型mixed的值绝对可以是任何值，包括undefined，null或没有prototype的对象。

您需要先显式检查data的实际类型是否具有type字段，然后才能访问它：

channel.onmessage = ({ data }) => {
  // 1. Make sure it's not null
  // 2. Make sure it's an object. This is only so that we can...
  // 3. ...call hasOwnProperty to make sure it has a 'type' field
  if(data != null && typeof data === 'object' && data.hasOwnProperty('type')) {
    // Inside this condition, Flow knows that the 'type' field exists
    if (data.type === 'OK') {
      this.setState({ isLoading: false, success: true, error: false });
    }
    else if (data.type === 'ERROR') {
      this.setState({ isLoading: false, success: false, error: true });
    }
  }
};

混合通过的流程中缺少流属性

1 个答案: