javascript - Flow property is missing in mixed passed - Stack Overflow

admin管理员组

文章数量:1324979

I'm using a BroadcastChannel to pass data from one browser window to another. However, using Flow I get the following error: Flow: property `type` is missing in mixed [1].

This is my code:

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 });
  }
};

I also tried to define my own type as such:

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 });
  }
};

But then Flow gives me the following error: Flow: Cannot assign function to `channel.onmessage` because `MessageType` [1] is inpatible with mixed [2] in property `data` of the first argument.

I figured out that the argument, passed by the message handler is declared like this:

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

So, if data is declared to be of type mixed but I need it to be a custom type, how would I do that?

I'm using a BroadcastChannel to pass data from one browser window to another. However, using Flow I get the following error: Flow: property `type` is missing in mixed [1].

This is my code:

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 });
  }
};

I also tried to define my own type as such:

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 });
  }
};

But then Flow gives me the following error: Flow: Cannot assign function to `channel.onmessage` because `MessageType` [1] is inpatible with mixed [2] in property `data` of the first argument.

I figured out that the argument, passed by the message handler is declared like this:

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

So, if data is declared to be of type mixed but I need it to be a custom type, how would I do that?

• javascript
• flowtype

Share Follow edited Jan 10, 2019 at 16:20 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Jan 9, 2019 at 13:08 lenny.myrlenny.myr 91322 gold badges1111 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Values of type mixed can be absolutely anything, including undefined, null or objects without a prototype.

You need to explicitly check that the actual type of data has a type field before being able to access it:

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 });
    }
  }
};

本文标签： javascriptFlow property is missing in mixed passedStack Overflow