我正在尝试在我的 Vue 项目中实现 SignalR，但遇到问题

Question

我正在使用 Vue + ts，我想在我的项目中实现 SignalR。我已阅读有关如何使用 SignalR 的 @dreamonkey/vue-signalr 文档。

import { VueSignalR } from '@dreamonkey/vue-signalr';
import { HubConnectionBuilder } from '@microsoft/signalr';
import { createApp } from 'vue';
import App from './App.vue';

// Create your connection
// See https://docs.microsoft.com/en-us/javascript/api/@microsoft/signalr/hubconnectionbuilder
const connection = new HubConnectionBuilder()
  .withUrl('http://localhost:5000/signalr')
  .build();

**createApp(App).use(VueSignalR, { connection }).mount('#app');**

我使用了这段代码，但出现了错误：

No overload matches this call.
  Overload 1 of 2, '(plugin: Plugin<[options: VueSignalRConfig]>, options: VueSignalRConfig): App<Element>', gave the following error.
    Argument of type '{ connection: HubConnection; }' is not assignable to parameter of type 'VueSignalRConfig'.
      Type '{ connection: HubConnection; }' is missing the following properties from type 'VueSignalRConfig': autoOffInsideComponentScope, failFn
  Overload 2 of 2, '(plugin: Plugin<[options: VueSignalRConfig]>, options: [options: VueSignalRConfig]): App<Element>', gave the following error.
    Object literal may only specify known properties, and 'connection' does not exist in type '[options: VueSignalRConfig]'.ts(2769)

我不知道如何解决它。

Answer 1

VusSignalRConfig

类型定义如下：

export interface VueSignalRConfig {
  connection: HubConnection;
  autoOffInsideComponentScope: boolean;
  failFn: (error: any) => void;
}

上述类型有 3 个必需的属性，只要

connection

不满足其类型。您可以做的是 1) 为所有属性提供一些值 2) 将其转换为所需的类型或任何

createApp(App).use(VueSignalR, { 
       connection,
       autoOffInsideComponentScope: false,       
       failFn: e=> console.log(e) }).mount('#app')

或

createApp(App).use(VueSignalR, { connection } as VueSignalRConfig).mount('#app') // import VueSignalRConfig as type