扩展接口似乎没有实现父成员

Question

我有两个接口

export interface IComponent{
    type: ComponentType;
    name: string;
    isEnabled:boolean;
}

export interface IAudioComponent extends IComponent {
    source: string;
    volume: number;
    loop: boolean;
    playbackRate: number;
}

但是当我像这样在我的 VueComponent 中记录一个 IAudioComponent 时

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

我在 DOM

中得到以下输出

{__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

为什么不包含类型、名称和isEnabled？

在 Typescript 文档中，他们证明这应该有效

https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces

Answer 1

这里有一些非常可疑的类型断言：

  _componentGroup: this.componentGroup as IComponentGroup,
  _focussedComponent: this.componentGroup.components[0] as IComponent,

这些只是声称对象是特定类型的，它们不会改变对象。因此，除非这些对象实际上是那种类型，否则它们实际上可能没有接口中定义的任何属性。

扩展接口似乎没有实现父成员

Extended interface doesn't seem to implement parent members

javascript

polymorphism

interface

typescript

vue.js