vue3 typescript props interface issue

문제 상황

vue3 + typescript로 개발을 하던 중, props에 type을 추가하고 싶었는데 예상치 못한 이슈를 마주했다. interface로 선언했는데 처음 보는 에러가 떴다.

원인

https://github.com/vuejs/language-tools/discussions/2421

위의 글을 참고하면 모든 프로젝트에서 발생하는 것은 아닌데 tsconfig에서 아래 옵션이 켜져 있으면 발생한다고 한다.

// tsconfig
"compilerOptions": {
    "composite": true
}

"declaration": true도 같은 에러를 발생시킨다.

본문에 따르면 props는 component에서 export된 type중 하나이고, interface가 defineProps에 전달되면 setup 함수 내부에 들어가기 때문에 이 에러를 피하려면 hoisting이 필요하다.

+ interface Props {
+   msg: string
+ }

export default defineComponent({
  setup() {
-   interface Props {
-     msg: string
-   }

    defineProps<Props>()
  }
})

해결책

현재로서는, Volar에서 hoisting을 하려면 export를 사용할 수 밖에 없는데, 이걸 사용자에게 강제하는건 별로 직관적이지 않다.

우회하는 다른 방법으로는 interface 대신 type을 사용할 수 있다.

읽으면서

나는 일단 interface를 export해서 우회하고자 한다. type으로 바꾸면 나중에 확장하지 못할 거 같아서. 개발자들이 이 문제를 어떻게 해결할지 궁금하다. 살포시 watch를 눌러본다.