I am facing an issue with two interfaces
export interface IComponent{
type: ComponentType;
name: string;
isEnabled:boolean;
}
export interface IAudioComponent extends IComponent {
source: string;
volume: number;
loop: boolean;
playbackRate: number;
}
When attempting to log an IAudioComponent in my VueComponent as shown below
data() {
return {
_componentGroup: this.componentGroup as IComponentGroup,
_focussedComponent: this.componentGroup.components[0] as IComponent,
};
},
computed: {
focussedComponentType() {
console.log(this.$data._focussedComponent);
return this.$data._focussedComponent.type;
}
},
The output displayed in the DOM is as follows
{__ob__: Observer}
loop: (...)
name: (...)
playbackRate: (...)
volume: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get loop: ƒ reactiveGetter()
set loop: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
get playbackRate: ƒ reactiveGetter()
set playbackRate: ƒ reactiveSetter(newVal)
get volume: ƒ reactiveGetter()
set volume: ƒ reactiveSetter(newVal)
__proto__: Object
This output raises the question of why it does not include the properties type, name, and isEnabled?
The Typescript documentation example suggests that this should work correctly
https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces