vue-native-websocket : Vue.js + Typescript 사용 방법

타입스크립트가 적용된 vuejs에서 vue-native-websocket 사용하려면 파일 1개 생성, 파일 1개 수정이 필요합니다. 매우 간단하니 아래 코드를 복사해서 붙여넣기하셔도 됩니다.

파일 생성

파일 이름 : vue-native-websocket.d.ts

declare module 'vue-native-websocket' {

import Vue, { PluginFunction } from 'vue';

export const install: PluginFunction<{}>;

module 'vue/types/vue' {

  interface Vue {

    $socket: any;

  }

}

module 'vue/types/options' {

  interface ComponentOptions<V extends Vue> {

    sockets?: any;

  }

}

타입스크립에서 vue-native-websocket 사용할 수 있게 d.ts 파일 추가가 필요한데, 위와 같이 꾸며주시면 됩니다.

파일 수정

파일 이름 : main.ts

import VueNativeSock from 'vue-native-websocket';

Vue.use(VueNativeSock, connectUrl, {

 mutations: socket,

 passToStoreHandler: handlerReceive,

});

vue-native-websocket를 사용할 수 있도록 main.ts 파일에 vue-native-websocket를 명시적으로 선언해야 하는데요. Vue.use 안에는 몇 가지 옵션을 추가할 수 있습니다. 해당 옵션은 필요한 것 검색해 추가하시면 됩니다.