Search code examples
typescripttypescript-typingssignature

Whats the difference between `MyInterfaceOne[] | MyInterfaceTwo[]` and `(MyInterfaceOne|MyInterfaceTwo)[]`

When using MyInterfaceOne[] | MyInterfaceTwo[] I get a Typescript error on a different place in my code which doesn't make sense for me.

myInterfaces = funcWithAboveSignature()

return myInterfaces.reduce(async (acc, interfaceType) => {
    await acc;
    if (interfaceType.prop) {
      return await someAsyncFunc(interfaceType);
    } else {
      return await someOtherAsyncFunc(interfaceType);
    }
  }, Promise.resolve());

The error says:

Argument of type '(acc: MyInterfaceOne, raw: MyInterfaceOne) => Promise<void>' is not assignable to parameter of type '(previousValue: MyInterfaceOne, currentValue: MyInterfaceOne, currentIndex: number, array: MyInterfaceOne[]) => MyInterfaceOne'.

But when changing the function signature from MyInterfaceOne[] | MyInterfaceTwo[] to (MyInterfaceOne|MyInterfaceTwo)[] it is working.

Can someone explain the difference between these two to me?

Solution 
  • MyInterfaceOne[] | MyInterfaceTwo[]

    says it can be of either an array of only MyInterfaceOne's or an array of only MyInterfaceTwo's.

    (MyInterfaceOne|MyInterfaceTwo)[]

    says it can be an array of either MyInterfaceOne's or MyInterfaceTwo's, so it can contain elements of any of the two types.