Incorrect excess property error when assigning to intersected array

[Artur-]

Bug Report

🕗 Version & Regression Information

Tested in 3.3.3 and 4.2.0-beta and Nightly

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about type inference

⏯ Playground Link

Playground link with relevant code

💻 Code

export interface ChildrenFn {
    (): Route[];
}

interface Route {
    path: string;
    children?: Route[] | ChildrenFn;
}

type RouteWithTitle = Route & { title?: string; children?: RouteWithTitle[] };

const mainView: RouteWithTitle = {
    path: "",
    children: [
        {
            path: "",
            title: "Empty",
        }
    ],
};

🙁 Actual behavior

Compile error highlighting title: "Empty":

Type '{ path: string; children: { path: string; title: string; }[]; }' is not assignable to type 'RouteWithTitle'.
  Type '{ path: string; children: { path: string; title: string; }[]; }' is not assignable to type 'Route'.
    Types of property 'children' are incompatible.
      Type '{ path: string; title: string; }[]' is not assignable to type 'ChildrenFn | Route[] | undefined'.
        Type '{ path: string; title: string; }[]' is not assignable to type 'Route[]'.
          Type '{ path: string; title: string; }' is not assignable to type 'Route'.
            Object literal may only specify known properties, and 'title' does not exist in type 'Route'.(2322)

🙂 Expected behavior

The type of the object inside children should be RouteWithTitle and no error should occur.

Extracting the child to a const "fixes" the error even though no more type info is given to the compiler:

const c = {
            path: "",
            title: "Empty",
        };

const mainView: RouteWithTitle = {
    path: "",
    children: [
       c
    ],
};

Playground link with the code that works

[RyanCavanaugh]

export interface Other {
    other: string;
}

interface Route {
    path: string;
    children?: Route[] | Other;
}

interface Root {
    path: string;
    children: Route;
}

type RouteWithTitle = Route & {
    children: (Route & { title?: string })[];
};

const mainView: RouteWithTitle = {
    path: "",
    children: [
        {
            path: "",
            title: "Empty" // <- Incorrect error
        }
    ],
};
// Legal
const p = mainView.children[0].title

[sandersn]

I reverted the fix to this because both excess and common property checks are handled by the same flag in assignability, and @types/mongodb relies on common property checks for some correct errors. Decoupling these checks is likely to be extremely complex to verify and therefore not worth it.