Allow `App.PageState` to be a union type

Describe the problem

I want to have typechecked history state, so after some googling, I found I could do it with App.PageState like this:

declare global {
  namespace App {
    export interface PageState {
      // Declare properties here
    }
  }
}

export {};

However, I am using the page state to open modals for e.g. editing stuff, so I want to sometimes save some data in the state. Ideally, I would like to be able to use something like a union to represent this

Describe the proposed solution

declare global {
  namespace App {
    export type PageState =
      | {
           type: "listFoo";
        }
      | {
            type: "addFoo";
            fooID: string;
        };
  }
}

export {};

But this doesn't work

Alternatives considered

type Temp =
  | {
       type: "listFoo";
    }
  | {
        type: "addFoo";
        fooID: string;
    };

declare global {
  namespace App {
    export interface PageState extends Temp {}
  }
}

export {};

This doesn't work either...

Importance

nice to have

Additional Information

No response

Start by locating the declaration and related type-checking coverage for App.PageState, then trace how the global type is consumed. Done means a discriminated union can be declared for PageState without breaking existing state typing or related checks.