Javascript 类型';{可见性:string;';线条连接';';线条帽';:string;}{可见性:string;}';不可分配给类型
我正在使用带有角度的mapbox。我试着用mapbox显示/隐藏一些东西 所以我有这个组件:Javascript 类型';{可见性:string;';线条连接';';线条帽';:string;}{可见性:string;}';不可分配给类型,javascript,angular,typescript,mapbox-gl-js,Javascript,Angular,Typescript,Mapbox Gl Js,我正在使用带有角度的mapbox。我试着用mapbox显示/隐藏一些东西 所以我有这个组件: export class ToggleLayersComponent implements OnInit { layouts = { contours: { visibility: 'visible', 'line-join': 'round', 'line-cap': 'round', }, museums: { visibi
export class ToggleLayersComponent implements OnInit {
layouts = {
contours: {
visibility: 'visible',
'line-join': 'round',
'line-cap': 'round',
},
museums: {
visibility: 'visible',
},
};
ngOnInit() {}
toggleLayer(evt: {value: 'contours' | 'museums'}) {
this.layouts[evt.value] = {
...this.layouts[evt.value],
visibility: this.layouts[evt.value].visibility === 'visible' ? 'none' : 'visible',
};
}
}
但我得到了这个错误:
Type '{ visibility: string; 'line-join': string; 'line-cap': string; } | { visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is missing the following properties from type '{ visibility: string; 'line-join': string;
当然我先在谷歌上搜索了一下。但我找不到任何解决办法
那么如何解决这个问题呢
多谢各位
因此,错误在这一行:
this.layouts[evt.value]
所以我甚至不能再跑了:
ERROR in src/app/desktop-dashboard/toggle-layer/toggle-layer.component.ts:63:5 - error TS2322: Type '{ visibility: string; 'line-join': string; 'line-cap': string; } | { visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is missing the following properties from type '{ visibility: string; 'line-join': string; 'line-cap': string; }': 'line-join', 'line-cap'
63 this.layouts[evt.value] = {
此时,
TypeScript
编译器不够“聪明”。当您这样做时:
this.layouts[evt.value] = {
...this.layouts[evt.value]
}
它将evt.value
视为类型“等高线”|“博物馆”
,并且无法推断它两次是相同的值,两次将是相同的对象。基本上,它阻止你做:
this.layouts['contours'] = {
...this.layouts['museums']
}
在您的示例中,您可以执行以下操作
this.layouts[evt.value].visibility = this.layouts[evt.value].visibility === 'visible'
? 'none'
: 'visible';
但我想您不想这样做,因为更改检测可能看不到对象引用已更改。如果这对您来说是个问题,我认为除了欺骗编译器之外,没有其他方法:
toggleLayer(evt: {value: 'contours' | 'museums'}) {
const key = evt.value as 'contours';
this.layouts[key] = {
...this.layouts[key],
visibility: this.layouts[key].visibility === 'visible' ? 'none' : 'visible'
};
}