[Vue] TypeScript에서 Vue 객체 타입 추가하기

https://kr.vuejs.org/v2/guide/typescript.html#%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EA%B3%BC-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%ED%83%80%EC%9E%85-%ED%99%95%EC%9E%A5

TypeScript 지원 — Vue.js

Vue 3.0부터는 아예 TypeScript를 지원하지만, Vue 2.0도 공식 가이드 등에서 TypeScript 사용을 지원하고 있다.

Vue를 사용하다 보면, 플러그인을 Vue.use로 포함하고, 전역적으로 Vue.plugin 으로 접근하는 경우가 많다. JavaScript를 사용할 때에는 멤버가 무엇이 있는지 체크하지 않으니 상관이 없었지만, TypeScript에서 Vue는 VueConstructor 타입이기 때문에 해당 플러그인을 멤버로 가지고 있지 않다고 트랜스파일 오류가 발생한다.

TypeScript에서는 이미 선언된 타입을 확장하는 Module Augmentation을 제공하고 있는데, 이를 사용하면 해결이 가능하다. 아래는 맨 위 공식 가이드에 나오는 예시이다.

// 1. 'vue'를 보충된 타입 선언 전에 import해야 합니다.
import Vue from 'vue'

// 2. 보충하고자 하는 타입이 있는 파일을 지정하세요.
// Vue의 constructor type은 types/vue.d.ts에 있습니다.
declare module 'vue/types/vue' {
  // 3. Vue에 보강할 내용을 선언하세요.
  interface Vue {
    $myProperty: string;
    myPlugin: plugin;
  }
}

 

이런 식으로 declare 해 주면, Vue.myPlugin 혹은 Vue.$myProperty가 타입 체크에서 걸리지 않고 사용할 수 있다. 공식 가이드에 나와 있는 방법임에도 불구하고 구글링했을 때에는 많이 보이지는 않았다.

참고로 물론 Vue 객체에만 사용 가능한 것은 아니고, 여러 가지로 응용이 가능하다.