【问题标题】:missing the following properties from type 'ObjectConstructor': prototype, getPrototypeOf, getOwnPropertyDescriptor, getOwnPropertyNames, and 18 more缺少类型“ObjectConstructor”的以下属性:prototype、getPrototypeOf、getOwnPropertyDescriptor、getOwnPropertyNames 等 18 个
【发布时间】:2020-11-21 06:46:56
【问题描述】:

我正在使用 Vue.js,我试图将我的对象分配给一个字段,但它得到以下错误

(property) _bodyContent: ObjectConstructor
Type 'GameComponent' is missing the following properties from type 'ObjectConstructor': prototype, getPrototypeOf, getOwnPropertyDescriptor, getOwnPropertyNames, and 18 more.Vetur(2740)

我的 Vue 组件中的 HTML。

  <v-tab v-for="(components, i) in $data._multiComponent.components" :key="i" @click="onTabClick(i)">
    {{i + 1}}
  </v-tab>

我的 Vue 组件中的脚本。 Vscode 显示错误在赋值左侧的 onTabClick 中。

<script lang="ts">

    import Vue, { PropOptions } from "vue";
    import MultiComponent from "~/ts/interfaces/game_components/multi_component";
    import GameComponent from "~/ts/interfaces/game_components/game_component";
    
    export default Vue.extend({
      props: {
        multiComponent: {
          type: Object,
          required: true,
        } as PropOptions<MultiComponent>,
      },
      data() {
        return {
          _multiComponent: this.multiComponent,
          _componentEnabled: true,
          _bodyContent: Object,
        };
      },
      methods: {
        onTabClick(index:number)
        {
          this._bodyContent = this._multiComponent.components[index];
        },
      }
    });
    </script>

多组件接口

import './game_component';
import GameComponent from './game_component';

export default interface GameMultiComponent{
    title:String;
    isEnabled:Boolean;
    components:Array<GameComponent>;
}

游戏组件接口

export default interface GameComponent{
    title:String;
    isEnabled:Boolean;
}

我也可以使用 GameComponent 作为我的字段类型而不是 Object 吗?我该怎么做?

【问题讨论】:

    标签: typescript vue.js interface nuxt.js


    【解决方案1】:

    data() {
      return {
         ......
        _bodyContent: Object, // you ascribe type Object to _bodyContent here
      };
    },

    然后您将其等同于 this._multiComponent.components[index],您将其归为类型 Array&lt;GameComponent&gt;

    export default interface GameMultiComponent{
        components:Array<GameComponent>; // you ascribe Array<GameComponent> to components here
    }

    改成

    data() {
      return {
         ......
        _bodyContent: this._multiComponent.components[0] as GameComponent , // you ascribe type Object to _bodyContent here
      };
    },

    这应该可以解决问题。

    【讨论】:

    • 我之前有过这个,但由于错误,它确实将其更改为扩展 Object。如果不扩展,我会得到同样的错误。
    • 我改了问题
    • 注明。这是当时最先浮出水面的东西。我已经更新了答案,@MikeOttink。
    • 我无法明确指定类型,但帮助它分配第一个具有数据功能的组件。
    • 我很困惑。能不能说的更直白点?你的问题解决了吗?如果是,您是如何解决的?答案有帮助吗?
    猜你喜欢
    • 2019-09-11
    • 2019-06-21
    • 2020-09-28
    • 2021-04-20
    • 2021-07-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-28
    相关资源
    最近更新 更多