글로벌 전역 변수 설정

vue + ts 프로젝트 환경설정에서 삽질한 제 1번, 글로벌 변수 설정입니다.
js에서는 Vue.config.js 내부에 aliases를 설정하면 바로 vue.prototype을 통해 전역으로 aliases가 설정되었는데요.
무슨 말인지 모르시면 여기 참조하세요
ts도 동일하게 될 줄 알았는데... 되지 않더군요. ㅜㅜ...
그래서 삽질한 결과를 정리하려고 합니다.

1. tconfig.json

tconfig.json에 내가 이 파일을 사용한다라고 명시해 줍니다.

• 글로벌로 담길 변수이니 types/vue-global.d.ts라고 하겠습니다. 아래처럼 추가해주세요

"include": [
    ...
    "types/vue-global.d.ts",
  ],

2. types/vue-global.d.ts

저는 가장 많이 쓰이는 api를 아무곳에서나 전역으로 호출하는 작업을 하였습니다. 동일한 방식으로 store, utills도 작업하시면 되겠네요

import Vue from "vue";

//api파일들에 대해 interface를 정의하는 부분입니다.
interface test {
  promiseTest: Function;
}
interface apis {
  test: test;
}

//이곳이 가장 중요한 곳입니다.
declare module "vue/types/vue" {
  interface Vue {
    $api: apis;
  }
}

3. main.ts

interface를 만들었으니 이제 main.ts에 등록해줍니다.

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router";
import api from "../src/api";

//등록한 api 인터페이스 전역으로 등록
Vue.prototype.$api = api;

new Vue({
  router,
  store,
  created() {
    console.log(this.$api);
  }
  render: h => h(App)
}).$mount("#app");

4. 결론

• 위 작업까지 완료하고 컴파일 하시면 콘솔에 api에 대한 정보가 나오게 됩니다.
• 동일하게 store, utils 등등 전역으로 많이 불릴 것들을 등록하시면 개발에 좀 더 속도가 붙을 것 같습니다.
• 안되시는 부분이 있으면 vue ts 공식문서를 참조해보세요.

#TS