I have some configuration objects I am setting up. Some of them have a method that can be called, and a parameter on that method will have the same type as another property on the object.

interface ILayoutEvent<T, K = keyof T> {
  entity: T;
  column: K;
  row: number;
}

interface ILayoutConfiguration<T> {
  display: string;
  values: Array<T>;
  changeFunction?: (event: ILayoutEvent<T>) => void;
}

class A { foo = 'foo' }
class B { bar = 'bar' }

class MyComponent {
  configs: Array<ILayoutConfiguration<A> | ILayoutConfiguration<B>> = []

  init() {
    this.configs = [
      {
        display: "First",
        values: [new A(), new A()],
      },
      {
        display: "Second",
        values: [new B(), new B()],
        changeFunction: (ev: ILayoutEvent<B>) => { console.log("B!", ev) }
      }
    ];
  }

  externalClickEvent(event: ILayoutEvent<B>, layoutConfig: (typeof this.configs)[number]){
     if (layoutConfig.changeFunction) {
      layoutConfig.changeFunction(event);
     //                           ^^^^^ Error Here
    }
  }
}

The produced error says:

Argument of type 'ILayoutEvent<B, "bar">' is not assignable to parameter of type 'never'.
  The intersection 'ILayoutEvent<A, "foo"> & ILayoutEvent<B, "bar">' was reduced to 'never' because property 'column' has conflicting types in some constituents.

How can I fix this? Somehow I need to infer the type being passed to this method.

Playground