［vue3、typescript］Vueファイルのimportでエラー

環境

vscode 1.82.2

vue 3.3.4
typescript 5.1.6
vite 4.4.9

手順

１．.vueファイルをimport

main.ts

import App from '@/App.vue'

現象

以下のエラーが発生

モジュール '@/views/AboutView.vue' またはそれに対応する型宣言が見つかりません。

原因

.tsと.vueで拡張子が異なり、main.tsがApp.vueをTypescriptとして扱えないことが原因。

対策

main.tsと同階層に「shims.d.ts」（VueファイルをTypeScriptとして認識させるためのファイル）
を作成。

shims.d.ts

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

参考