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

Posted 2023-02-22

【中文标题】Vue JS - vue 组件上的自定义属性会导致 TS 错误

【英文标题】：Vue JS - custom properties on vue component gives TS errors

【发布时间】：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 在方法或钩子中）。

哦，好吧，有没有办法做到这一点？

【参考方案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 才能加载。