Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Nuxt.js 2.x + TypeScript 4.x その0008 Vue.extend()でやっている場合のmixin

制作 vuejs typescript nuxtjs

はじめに

検索すると、クラスベースで書いてデコレータを使う方法については多くヒットしますが、Vue.extend()で書いている場合の方法についてはあまりヒットしなかったのでこの記事を書いています。

特に変わったことは書いていませんが。

今日の開発環境

  • Nuxt 2.14.12
  • TypeScript 4.2.3

my_mixin.tsの作成とその記述内容

例えば以下のような感じでmy_mixin.tsを作成します。
mixinもコンポーネントを作成する場合と同じく Vue.extend() することで正しく型推論されるようになります。

import Vue from 'vue'

export default Vue.extend({
  computed: {
   myComputed() {
      return 'myComputed'
    },
  },
})

my_mixin.tsをimportする側のコンポーネントの作成とその記述内容

例えば以下のような感じでコンポーネントのファイルmy_component.vueを作成します。

<template>
  〜略〜
</template>
<script lang="ts">
import Vue from 'vue'

import myMixin from '~/mixins/my_mixin'

export default Vue.extend({
  name: 'MyComponent',
  mixins: [myMixin],
  computed: {
    hoge() {
      return 'hoge'
    },
  },
})
</script>
<style lang="scss" scoped>
  〜略〜
</style>

おまけ

以下のページに (this as InstanceType<typeof adIdMixin>) といったように、Type Assertionをすると良いようなことが書いてあります。

私は今のところそのようなことをしなくても正常に型推論されていますが、どなたかの参考になるかも。