typescript기반 에서는 this.$router가 인식이 안되는데 다른 방법이 있을까요?

Question

현재 타입스크립트 기반의 nuxt.js 프로젝트 생성해서 강의 수강하고 있습니다. <script lang="ts"></script>

라우팅 부분에서 this.$router.push(`detail/${id}`);이 부분이 계속 인식이 안되고 있어서 아래로도 바꿔서 해보고 구글링 해보는데 먹히질 않네요.

this.$nuxt.$router.push(`detail/${id}`);

혹시 타입스크립트 기반에서는 접근 방법이 다른가요?

Answer

자답입니다. 이것저것 수정하다보니 해결되었네요. 타입스크립트 기반일 경우 프로젝트 루트에

vue-shim.d.ts파일을 추가하고 하단 부분을 넣어야 됩니다.

...

/*
 Vue파일의 <script></script>태그내에서 this.$router 사용가능하게 처리
*/
declare module 'vue/types/vue' {
interface Vue {
$router: VueRouter
}
}

...

그리고 나서 해당 ts파일을 읽어들일수 있게 tsconfig.json 하단에 아래을 추가하면 컴포넌트 내에서 this.$router 부분이 인식이 됩니다.

{

...

"files": ["./vue-shim.d.ts"]

....

}

타입스크립트 기반으로 Nuxt.js개발하시는 분들에게 도움이 되시길 바랍니다.

Answer

안녕하세요, Nuxt로 프로젝트 생성하실 때 TypeScript를 선택해서 생성하시면 store, router와 같은 공식 라이브러리 타입 환경은 모두 설정되어 있을 거예요. JS 기반 프로젝트 생성하시고 직접 타입스크립트 관련 패키지를 하나씩 추가하셨을까요?