Why do these lines

handleSettings: IResizeHandleSettings = {
  right: {
    position: 'right',
    axis: 'x',
    dimension: 'width',
    eventProperty: 'clientX',
    translate: false,
    deltaMultiplier: 1,
  },
  left: {
    position: 'left',
    axis: 'x',
    dimension: 'width',
    eventProperty: 'clientX',
    translate: true,
    deltaMultiplier: -1,
  },
  bottom: {
    position: 'bottom',
    axis: 'y',
    dimension: 'height',
    eventProperty: 'clientY',
    translate: false,
    deltaMultiplier: 1,
  },
  top: {
    position: 'top',
    axis: 'y',
    dimension: 'height',
    eventProperty: 'clientY',
    translate: true,
    deltaMultiplier: -1,
  },
};

selectedHandleSettings: {
  x: string | undefined | null;
  y: string | undefined | null;
  settings: IResizeHandleSettings[];
};

method(positionKey: string) {
  this.selectedHandleSettings.settings.push(this.handleSettings[positionKey]);
}

throw the error

S2345: Argument of type 'IResizeHandleSettingsDetail' is not assignable to parameter of type 'IResizeHandleSettings'.   Type 'IResizeHandleSettingsDetail' is missing the following properties from type 'IResizeHandleSettings': left, right, top, bottom

even though my type is defined with the index signature as follows

export interface IResizeHandleSettings {
  [key: string]: IResizeHandleSettingsDetail;
  left: IResizeHandleSettingsDetail;
  right: IResizeHandleSettingsDetail;
  top: IResizeHandleSettingsDetail;
  bottom: IResizeHandleSettingsDetail;
}

export interface IResizeHandleSettingsDetail {
  position: string;
  axis: string;
  dimension: string;
  eventProperty: string;
  translate: boolean;
  deltaMultiplier: number;
}