Prologue
TypeScriptでVue.Draggableをimportした際、以下のようなエラーが出ました。
Could not find a declaration file for module 'vuedraggable'. '/******/node_modules/vuedraggable/dist/vuedraggable.umd.min.js' implicitly has an 'any' type.
Try `npm install @types/vuedraggable` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuedraggable';`
環境
- macOS: 10.15.2
- node.js: 10.16.0
- terminal: iTerm
VS Code
-
Project概要
- 言語: Vue.js, TypeScript
- パッケージマネージャ:
yarn
インストールした際のコマンド:
yarn add vuedraggable
確認と解決方法の決定
package.jsonとnode_modulesを確認し、該当のmoduleがインストールされていることを確認。
確認するとTypeScriptに関するIssueが残ったままなので(2020/1/2時点)がありました。エラー内容とIssue内のコメントを参考に以降の内容で解決を図ります。
実際に解決した方法
-
d.tsファイルを¥src内に作成。ここではtypes.d.ts。
¥src¥types.d.ts
2. 宣言を書きます。
declare module 'vuedraggable'
3. ここまででIssueにもあるように、VS Codeのエラーが消えませんでした。うまく読み込めていないかと思い、VS Codeを再起動したところ、エラーはなくなりました。
終了。
Epilogue
課題
参考:
https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html
https://developer.hatenastaff.com/entry/2016/06/27/140931
ファイル名について
特に明記されていないこととミニマムなプロジェクトだったため、d.tsファイルはtypes.d.tsとしました。
命名のルールや設計的レベルで良いものがあれば、それに則って使用したいと思います。
また、@typesディレクトリを作成して、tsconfig.jsonのcompiler設定を追加する方法もいつか試して見たいと思います。VS Codeを使用していると、たまにこのような保存？設定？に関して遅延のようなものが起こります。何故...VS Codeはエラーがわかりやすく表示され助かっているので、この遅延に関する良い解決方法もあれば追って記載します。