타입스크립트 다루던 중 만나게 된 에러입니다. 툴은 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;
}
}
}
비주얼 스튜디오 코드로 생성한 프로젝트 루트에 위 파일을 추가하세요.
만약, 별도로 사용하던 ts 파일이 있다면, 끝에 추가하셔도 좋습니다.
관련 글
[Visual Studio Code] SVN not found + TortoiseSVN 해결
TypeScript 문자열 숫자 변경 - 단항연산자 (string to int)
TypeScript 강좌 4. 호환성 tsconfig.json
