[Vue.js/TypeScript] Property "$anime" does not exist on type "Header"

 

 

문제 상황

SVG 애니메이션 연습을 위해서 TypeScript를 적용 중인 Vue.js에 anime.js를 다운로드 받았다. 아래처럼 달 모양 SVG 그래픽을 이용해 클릭 시 가벼운 애니메이션을 추가하는 과정에서 자꾸 아래 같은 에러가 났다.

 

Property '$anime' does not exist on type 'CombinedVueInstance<Vue, AppState, { toggleMode() Property '$anime' does not exist on type 'CombinedVueInstance<Vue, AppState, { toggleMode(): void; }, unknown, Readonly<Record<never, any>>>'.

해결 과정

우선 anime.js는 Vue.use()로 등록을 해두기 위해 플러그인화 해서 등록을 해둔 상태였다.

 

// src/plugins/anime.ts 파일을 생성하고, 

declare module "animejs/lib/anime.es.js"; // module을 선언해주었다. 


// src/main.ts 에는 아래처럼 plugins의 anime 파일 경로를 받아와 import 해주었다. 
// file 확장자인 ts는 빼준다. 

import Vue from "vue";
import App from "./App.vue";
// ...

import VueAnime from "./plugins/anime";
Vue.use(VueAnime); 

 

이때 경로 부분에 계속 빨간 밑줄로 에러가 뜨길래, vscode 에러인지 ts 에러인지 확실하진 않았지만, stackoverflow 조언대로 아래처럼 anime.d.ts 파일을 만들어 모듈을 선언해주었다. 파일명은 무관하지만, d.ts 확장자로 작성해주어야 한다.

 

// anime.d.ts

declare module "animejs/lib/anime.es.js";

 

애니메이션 연습을 해당 프로젝트에서 몇 번은 더 할 것 같아서, 전역으로 등록하기 위해 만든 plugins 폴더 내부의 anime.ts 코드는 아래와 같다.

import anime from "animejs/lib/anime.es.js";

const VueAnime = {
  install(Vue: any) {
    Vue.prototype.$anime = anime;
    // app.config.globalProperties.$anime = anime;
    // Vue.prototype.$testData = "testData";
  }
};
export default VueAnime;

 

맨 처음 app.config.globalProperties.$anime = anime;를 통해서 등록을 해주려니까, 잘 되지 않아서 Vue.prototype.$anime로 등록해주었고, 확인을 위해 string 문자열을 데이터로 갖는 $testData 전역 변수를 설정해 콘솔에 출력해봤다.

const VueAnime의 install 인자에도 타입을 추가해주었다.

 

다른 건 몰라도 Vue 프레임워크 상의 엘리먼트들 타입 지정과 관련해서 타입 스크립트를 적용하는 과정이 아직 미숙해서 많이 헤맸다 흑흑..

 

아무튼 일련의 과정들을 거치고 나서도, 아래처럼 에러메세지는 출력이 되는데, vscode 상에서만 보이는 에러여서 tsconfig 파일에 몇 가지 설정을 추가해주면 괜찮을 것 같다.

 

 

참고

programmer.help/blogs/vue-typescript-defining-global-variables-or-methods.html