【Vue】【TypeScript】VueコンポーネントでMixinするためのTypeScriptモジュールを作る方法

Question

Vue CLIでvueとtypescriptの環境を作成しました。
Mixinをしたいので、TypeScriptのコンポーネントで使用できるmixin用のモジュールファイルを作りたいと思います。

vue-class-componentモジュールを使用想定のモジュールの作り方に関する情報は見つかるのですが、vue.extend()を使用した場合のモジュールの作り方は見つけられませんでした。

（後述しますが、）一応、エラーは出るものの動作するMixin用モジュールは作れました。
ただ、ビルド時にエラーが出るので他の方法があるのだと思います。

どの様に作成するのが良いでしょうか？

環境

開発で使用しているモジュールのバージョンは次の通りです。

モジュール	バージョン
vue	^2.6.11
typescript	3.9.7

状況

次の様な、コンポーネントを用意しました。
mixin側で指定した、下記の要素を使用したいです。

• methods
• data
• filters

<template lang="pug">
  div
    h2 {{ title | lowerCase }}
</template>

<script lang="ts">
  import Vue from "vue";
  import myMixin from "@/scripts/myMixin.ts"

  export default Vue.extend({
    mixins: [myMixin],
    mounted(): void {
      this.testMessage();
    }
  })
</script>

実現出来る方法

コンポーネントはオブジェクトなので、コンポーネント内で使用したい情報を内包したオブジェクトをexportの対象にすることにしました。

// myMixin.ts
export default {
  data() {
    return {
      title: 'Welcome to Tokyo'
    }
  },
  methods: {
    testMessage() {
      console.log(this.title);
    }
  },
  filters: {
    lowerCase(value: string) {
      return value.toLowerCase();
    }
  },
};

これだと、mixinされた状態でブラウザでも動作することは確認できました。
しかし、ビルド時に次の様なエラーが発生します。

ERROR in (Vueプロジェクトディレクトリ)/src/scripts/components/CountNumber.vue(13,10):
13:10 Property 'testMessage' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
    11 |     mixins: [myMixin],
    12 |     mounted(): void {
  > 13 |       this.testMessage();
       |          ^
    14 |     }
    15 |   })
    16 | </script>
ERROR in (Vueプロジェクトディレクトリ)/src/scripts/myMixin.ts(11,24):
11:24 Property 'title' does not exist on type '{ testMessage(): void; }'.
     9 |   methods: {
    10 |     testMessage() {
  > 11 |       console.log(this.title);
       |                        ^
    12 |     }
    13 |   },
    14 |   filters: {
Version: typescript 3.9.7
Time: 455ms

所感

1つ目のエラーに関しては、解決方法を探しています。
2つ目のエラーに関しては、同じオブジェクトの中の要素を指定しているので単体のファイルで見た場合にthisを使うのは正しくないのは理解できます。

Answer 1

参考にしたのは↓の記事です。
https://engineering.linecorp.com/ja/blog/vue-js-typescript-otoshidama/

src/app.ts

言われたとおりas InstanceType<typeof myMixin>を使ってthisのタイプを指定しました。
pugは使ってないので勝手に修正しました。すみません。

<template>
  <div>
    <h2>{{ title | lowerCase }}</h2>
  </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import myMixin from "@/scripts/myMixin.ts"

  export default Vue.extend({
    mixins: [myMixin],
    mounted(): void {
      (this as InstanceType<typeof myMixin>).testMessage();
    }
  })
</script>

src/scripts/myMixin.ts

言われたとおりVue.extendを使いました。

// myMixin.ts
import Vue from 'vue';
export default Vue.extend({
    name: "myMixin",
    data() {
        return {
            title: 'Welcome to Tokyo'
        }
    },
    methods: {
        testMessage(): void {
            console.log(this.title);
        }
    },
    filters: {
        lowerCase(value: string) {
            return value.toLowerCase();
        }
    },
});

Comments

[hasshy]

ご回答いただきありがとうございます。
ご連絡が遅れて申し訳ありません。

コードや解説ページもご共有いただきありがとうございます。
手元でも確認できました。

Vue.extend()で作成したモジュールをmixinで使っても良いのですね。
後、thisをmixinで取得したモジュールに紐付けて取ってくればthisのエラーも改善できるのですね。

とても参考になりました。
ありがとうございます。