注意:執筆時点での情報です。 Vetur の将来のバージョンでは解消される可能性があります。
概要
そのまま件名の通りなのですが、
Vue.js で *.vue
ファイルを作り、 <script lang="ts">
でコンポーネントを作るときには、
types
フォルダに vue-shim.d.ts
等のファイルを作って、型定義をすると思います。
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
Visual Studio Code (VSCode) で Vetur プラグインを導入して、
TypeScript で Vue コンポーネントを作ったりします。
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
methods: {
helloWorld () {
this.$emit('say', 'Hello, world!')
}
}
})
</script>
すると、 Vetur の型ヒントでは this
も this.$emit
も any
となってしまいます。
原因
この問題について、 Vetur のリポジトリに Issue が上がっていました。
https://github.com/vuejs/vetur/issues/1817#issuecomment-614789578
In my case it's because I am using a multiroot workspace via 'Add Folder to Workspace'. When I take a project root into its own workspace, the problem goes away.
VSCode の Workspace に複数のルートフォルダが登録されていると、
Vetur が types
フォルダを正しく解析できない、ということのようです。
解決策
1つの Workspace には、1つのルートフォルダのみにすると、正常に動作します。
このエントリが、困っているどなたかの助けになったら幸いです。