类型为"IResizeHandleSettingsDetail"的参数不能分配给类型为"IResizeHandleSettings"的参数

Question

为什么这些行

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]);
}

抛出错误

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

，即使我的类型是用如下的索引签名定义的

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;
}

Answer 1

this.handleSettings[positionKey]指的是IResizeHandleSettingsDetail，因此需要相应地设置selectedHandleSettings:

selectedHandleSettings: {
x: string | undefined | null;
y: string | undefined | null;
settings: IResizeHandleSettingsDetail[]; // <-- ...Detail!
};