TypeScript開発環境を構築してる時にハマったので書いておきます。

エラー

Vueを使った開発中、コンパイルは問題ないのにVSCodeが下記のエラーを表示します。

モジュール 'foo.vue' が見つかりません

よくある対処

プロジェクトルートに下記内容の定義ファイル sfc.d.ts　を作れば解決します。

sfc.d.ts

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

今回の対処

しかしプロジェクトルートはただでさえ設定ファイルが多いので、これ以上増やしたくありません。@typesというフォルダを作り、そこにまとめます。

プロジェクトの一部

.
├── src
│   ├── @types
│   │   └── sfc.d.ts // ここに置いた
│   └── js
│       └── index.ts
└── tsconfig.json

tsconfig.json を編集

tsconfig.json

{
  "compilerOptions": {
　〜略〜
  "include": [
    "./src/js/**/*.ts",
    "./src/js/**/*.tsx",
    "./src/js/**/*.vue",
    "./src/@types/**/*.ts", // これを追加
    "tests/**/*.ts",
    "tests/**/*.tsx",
  ],
　〜略〜
}

tsconfig.json 全文

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types",
    ],
    "types": [
      "webpack-env",
    ],
    "paths": {
      "@/*": ["./src/js/*"],
    },
    "lib": [
      "es2015",
      "es2015.promise",
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "./src/js/**/*.ts",
    "./src/js/**/*.tsx",
    "./src/js/**/*.vue",
    "./src/@types/**/*.ts",
    "tests/**/*.ts",
    "tests/**/*.tsx",
  ],
  "exclude": [
    "node_modules"
  ],
}
```</div>
</details>