カクカクしかじか

技術的なアレコレ

型定義されたnpmパッケージをインストールしてもエディタ上で型定義ファイルが読み込まれない場合の解決法と残った謎

起こったこと

qrcode というnpmパッケージを型定義パッケージと一緒にインストール。

$ npm install --save @types/qrcode
$ npm install --save qrcode

しかし、VSCode上では import { toDataURL } from "qrcode"; の 部分のモジュールが見つからないというエラーが出て定義元にジャンプ出来ませんでした。

<script lang="ts">
import Vue from "vue";
import { toDataURL } from "qrcode";

stackoverflow.com

試したこと

  • Nuxt.js のプロジェクトで以下の記述をした /types/qrcode.d.ts という型定義ファイルを置いたら、 node_modules/@types/qrcode/index.d.ts が読み込まれるようになりました。
declare module "{ qrcode }";

www.typescriptlang.org

謎だったこと

Nuxt.js のプロジェクトで以下の記述をした /types/qrcode.d.ts という型定義ファイルを置いたら、 node_modules/@types/qrcode/index.d.ts が読み込まれるようになりました。

これの結果、正しくコードジャンプ出来るようになったのですが、正しくエディタ上で読み込まれた後に、 /types/qrcode.d.ts を削除しても node_modules/@types/qrcode/index.d.ts に正しくコードジャンプ出来るのは変わりませんでした。

VSCodeを再起動したり、node_modulesを削除して再インストールしても正しく読み込まれることがなかったので、何で /types/qrcode.d.ts を追加した後なら、/types/qrcode.d.ts を削除しても正常に型定義ファイルがロードされるようになったのかだけ謎が残ります...