Flow quirk

flow

function a(args: { a1: Array<number>, a2: number }) {
  // Should Error
  console.log(args.a1.join(','));
}

a({});


// Ok, we try the exact object now
function b(args: {| a1: Array<number>, a2: number |}) {
  console.log(args.a1.join(','));
}

// $ExpectError
// Good
// b({});

b({a1: [1,2,3], a2: 1});


// What if we want optional properties?
function c(args: {| a1?: Array<number>, a2?: number |}) {
  if (args.a1) {
    console.log(args.a1.join(','));
  }
}

// Why it's error?
//c({});

// Still error WTF
//c({a1: undefined, a2:undefined});

const sealedObject = {
  a1: undefined,
  a2: undefined,
};

// Flow is ok now. But this way doesnt feel right...
c(sealedObject);

// What if we want optional properties?
type Args = {| a1: Array<number>, a2: number |} & { b1?: Array<number>, b2?: number };

function c(args?: Args) {
  if (args && args.a1) {
    console.log(args.a1.join(','));
  }
}

// Error, Whyyyyyyyyyyy
//c({});

c()

Required props and optional hack with &