flow type question mark?

Question

So confused on using '?' in flow. AFAIK (thanks to flow type question mark before or after param?):

1. When '?' before ':', means bar is optional, can be string or undefined: bar?: string

2. When '?' after ':', means bar is maybe type, can be string, undefined, or null. bar: ?string

My question is: In which circumstance we should the first option over the second? How about bar?: ?string ?

flow is hard...

Answer 1

Optional means that the property can be omitted. Have a look at this example:

type Foo = {
  optional?: string
}

const foo: Foo = {}; // OK

type Bar = {
  maybe: ?string;
}

const bar: Bar = {}; // Error: `maybe` is missing in object literal

Regarding combination of optional and maybe - it allows assigning null to optional property:

type Baz = {
  maybeAndOptional?: ?string;
}

let baz: Baz = {}; // OK
baz = { maybeAndOptional: null }; // OK

type Foo = {
  optional?: string
}

let foo: Foo = {}; // OK
foo = { optional: null } // Error: null is incompatible with string