Vue JS - vue 组件上的自定义属性会导致 TS 错误答案

【问题标题】：Vue JS - custom properties on vue component gives TS errorsVue JS - vue 组件上的自定义属性会导致 TS 错误
【发布时间】：2021-05-26 07:05:29
【问题描述】：

我已经创建了一些 Vue 中间件，我正在尝试向 Vue 中的一个组件添加自定义属性，如下所示：

middleware.js：

import { VueConstructor } from 'vue/types';
function eventPlugin(vue: VueConstructor): void {
  const Socket = new someClass();

  Object.defineProperties(vue.prototype, {
    $socket: {
      get: function get() {
        return Socket;
      },
    },
  });
  vue.$socket = Socket;
}

myComponent.js

const MyComponent = Vue.extend({
  name: 'MyComponent',
  $socket: {
    event(data: any) {

    }
  },
  methods: {
    MyMethod() {

    }
  }
})

app.js

import Vue from 'vue';
import eventPlugin from './middleware.js';
import MyComponent from './myComponent.js'
Vue.use(eventPlugin);

export default new Vue({
  render: (h) => h(MyComponent),
}).$mount('#app');

我想在这里添加的自定义属性显然是socket。问题是当我添加它时，我得到打字稿错误：

对象字面量只能指定已知属性，而 'socket' 可以 'ComponentOptions>，记录<...>>'。

正如您在middleware.js 中看到的那样，我尝试在那里定义属性，所以我不确定为什么会收到错误消息？

【问题讨论】：

您显示的代码创建$socket，而不是sockets。
向原型添加属性不会将其添加到组件选项中。它只是让你从组件上下文中访问属性（例如，this.$socket 在方法或钩子中）。
哦，好吧，有没有办法做到这一点？

标签： javascript typescript vue.js vuejs2

【解决方案1】：

添加实例属性或组件选项时，还需要augment the existing type declarations。

基于Augmenting Types for Use with Plugins (Vue 2)：

要键入提示 $socket 实例属性：

declare module 'vue/types/vue' {
  interface VueConstructor {
    $socket: string
  }
}

要键入提示 $socket 组件选项：

import Vue from 'vue'

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    $socket?: string
  }
}

上面的类型声明应该放在src 目录中的.d.ts 文件中。如果使用 VS Code，任何新的 .d.ts 文件可能需要重新启动 VS Code 才能加载。

【讨论】：