6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.DraggableをTypeScriptで使用した際、moduleが見つからないというエラーが出た際の解決方法

Last updated at Posted at 2020-01-02

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

確認と解決方法の決定

  1. package.jsonとnode_modulesを確認し、該当のmoduleがインストールされていることを確認。

  2. 確認するとTypeScriptに関するIssueが残ったままなので(2020/1/2時点)がありました。エラー内容とIssue内のコメントを参考に以降の内容で解決を図ります。

実際に解決した方法

  1. 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はエラーがわかりやすく表示され助かっているので、この遅延に関する良い解決方法もあれば追って記載します。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?