TypeScriptのファイルでVueファイルをimportしようとすると「Cannot find module '~~~~~' or its corresponding type declarations.」のエラーが出てしまう。

App.vue

<template></template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
        
    },
})
</script>

main.ts

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

上記のようにmain.tsでApp.vueをimportしようとすると、main.tsの2行目「"./App.vue"」部分に

Cannot find module './App.vue' or its corresponding type declarations.

のエラーが出てしまう。

これはmain.tsがApp.vueをTypeScriptとして扱えないことが原因である。（よく考えると拡張子が異なるからそりゃ扱えないよね...）

解決法は、main.tsと同階層に「shims.d.ts」というファイル（VueファイルをTypeScriptとして認識させるためのファイル）を作成してあげればいい！

shims.d.ts

// コピペでOK!
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

もし間違っている部分などございましたら、お手数ですがご教示いただければ幸いです！