Vue + TypeScriptにおける.vueファイルの型定義をexportしたい

shims-vue.d.tsについて

Vue + TypeScriptでプロジェクトを作ると以下のようなshims-vue.d.tsをどこかに置くと思います．

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

github.com

この型定義はすべての.vueファイルに対しての定義であり，個々の.vueファイルの細かい型(propsやdataなど)については定義していません． 個々の.vueファイルの型定義を同一ファイル内で利用する場合には問題ないですが，外部のファイルで利用する場合（ユニットテストなど）では不十分です．

解決策

.d.tsを以下のような方針で定義するといいと思います．

Foo.d.ts

import Vue from 'vue'

export interface Data {
  ...
}
export interface Methods {
  ...
}
export interface Computed {
  ...
}
export interface Props {
  ...
}
export type Component = Vue & Data & Methods & Computed & Props

Foo.vue

import Vue from 'vue'

export default Vue.extend<Data, Methods, Computed, Props>({
  ...
})

Foo.test.ts

jest + vue-test-utils

import {shallowMount} from '@vue/test-utils'
import Foo, {Component} from './Foo'

test('', () => {
  const wrapper = shallowMount<Component>(Foo)
  ...
})