vue-cli3.0 typescript Vue2Editor

Question

https://alligator.io/vuejs/using-new-vue-cli-3/

↑vue-cli 3.0 typescriptの環境を作りました

この環境で

http://www.vue2editor.com/

↑こちらのモジュールを使いたいです

//HelloWorld.vue

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

import { VueEditor } from "vue2-editor"; //← ここにとりあえず入れてみました 

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

しかし

ERROR in /Users/my-project/src/components/HelloWorld.vue
38:27 Could not find a declaration file for module 'vue2-editor'.

とエラーが出てしまい、ビルドできません...

Could not find a declaration

というのは型定義ファイル?がないからでしょうか

何か対策方法はありますでしょうか

Answer 1

おっしゃるとおり型宣言ファイルがないからですね。
@types/○○○ などの名前で npm ライブラリを検索して型宣言ファイルが見つからない場合は、自分で適当にこしらえてやる必要があります。

vue2editor.d.ts などとしてファイルを作成して、下記のような感じでモジュールに対する型を宣言してやりましょう。any を割り当てても良いのですが、プロパティ等の補完をしてくれなくなります。詳しい説明はTypeScript 公式ドキュメントを御覧ください。

import Vue, { PluginFunction } from 'vue';

declare module 'vue2-editor' {
  export const VueEditor: Vue;

  interface Vue2Editor {
    VueEditor: typeof VueEditor;
    install: PluginFunction<never>;
  }

  export default Vue2Editor;
}

あと、通常の ts ファイルと型宣言ファイルをごちゃまぜにしたくない場合は tsconfig.json 内で

"paths": {
  "@/*": ["src/*"],
  "*": ["types/*"]
}

などとして、型宣言用のディレクトリを作って、その中に型宣言ファイルを放り込みましょう。

Comments

[退会済みユーザー]

回答ありがとうございます
少し理解が難しいので、お時間ください
また質問させていただくかもしれないです...
お礼が遅くなりすみません