Typescript having problem with getting correct type while filtering some types from union type

I have code similar to this:

type Foo = {
  products:
    | {
        fooName: string;
      }
    | {
        fooName: string;
      }[]
    | null;
  amount: number;
}[];

const exampleObj = { products: { fooName: 'Foo' }, amount: 13 };

const foo: Foo = [
  exampleObj,
  exampleObj,
  { products: [{ fooName: 'Foo' }, { fooName: 'Foo' }], amount: 14 },
] as Foo;

const bar = foo.map((el) => {
  if (!el.products || Array.isArray(el.products)) {
    return exampleObj;
  }

  return el;
});

bar.forEach((el)=> {
  console.log(el.products.fooName)
})

this code works as expected - element in foo that has product value set to array is filtered out while mapping through foo. Bar has third element set to exampleObj.

My problem is that typescript suggests type of bar is:

const bar: {
    products: {
        fooName: string;
    } | {
        fooName: string;
    }[] | null;
    amount: number;
}[]

and I get an error:

Property 'fooName' does not exist on type '{ fooName: string; } | { fooName: string; }[]'.
  Property 'fooName' does not exist on type '{ fooName: string; }[]'.

I can fix this error by casting bar with

const bar = foo.map((el) => {
  if (!el.products || Array.isArray(el.products)) {
    return exampleObj;
  }

  return el;
}) as typeof exampleObj[]

but am I missing something or typescript just can't understand what is going on in that code?

Codepen: https://codepen.io/Neidz/pen/qBJyjWa (but as far as I know you will not get type suggestions or typescript errors here)

You've run into a missing feature of TypeScript, as requested in microsoft/TypeScript#42384. TypeScript doesn't currently propagate the results of narrowing an object property up to the parent object. (Well, except if that parent object is of a discriminated union type, but Foo[number] is just a single object type, not a union at all, and therefore definitely not a discriminated union.) So checking el.products property only serves to narrow el.products and not el.

If you want to see this feature implemented, it wouldn't hurt for you to go to it and give a 👍. It probably wouldn't help much either, though.

Anyway, until and unless we get support for the feature, you'll need to work around it. One way to do so is to copy the narrowed property over into a new object, since that will force the compiler to go through the analysis of the applying the narrowed type to the property in the new object:

const bar = foo.map((el) => {
   if (!el.products || Array.isArray(el.products)) {
      return exampleObj;
   }
   const ret = { ...el, products: el.products };
   /* const ret: {
    products: {
        fooName: string;
    };
    amount: number;  } */
   return ret;
});

bar.forEach((el) => {
   console.log(el.products.fooName); // okay
})

Or, a little more ergonomically:

const bar = foo.map((el) => {
   const { products, ...restEl } = el;
   if (!products || Array.isArray(products)) {
      return exampleObj;
   }
   return { ...restEl, products }
});

bar.forEach((el) => {
   console.log(el.products.fooName); // okay
});

Playground link to code