모듈 vue-native-websocket에 대한 선언 파일을 찾을 수 없습니다

타입스크립트 다루던 중 만나게 된 에러입니다. 툴은 visual studio code이며, vuex와 vue cli를 사용했습니다.

우선, 웹소켓 vue-native-websocket은 아래 공식 사이트를 참조하시면 됩니다.

터미널에서 yarn add vue-native-websocket 명령어를 입력하면 설치가 됩니다. npm install vue-native-websocket --save도 상관없어요.

vscode + vue cli + vuex

근데, import VueNativeSock from 'vue-native-websocket' 부분에서 웹소켓 오류가 발생합니다.

모듈 'vue-native-websocket'에 대한 선언 파일을 찾을 수 없습니다

'websocket/dist/build.js'에는 암시적으로 'any' 형식이 포함됩니다.

Try 'npm install @types/vue-native-websocket' if it exists or add a new declaration (.d.ts) file containing 'declare module 'vue-native-websocket';' (ts7016)

해결책은 visual studio code 프로젝트에 .d.ts 파일을 추가하는 것입니다.

정확한 원인은 파악하지 못했는데, 타입스크립트에서 100% 호환되도록 지원하지 않는 것 같습니다. 정확한 원인을 아신다면 댓글 좀 ...

해결 방법 : vue-native-websocket.d.ts 파일 추가

vue-native-websocket.d.ts

// Copyright 2019 Cargill Incorporated
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

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;
    }
  }
}