TypeScriptでVueのクラスを継承する

TypeScriptでVue.jsの単一コンポーネントを作る場合、Vueクラスを基底とした継承クラスを作る。ただ、似たようなコンポーネントは同じメソッドなどが並ぶため使いまわしたいと思う時がある。

試してみると特に問題なく継承用の共通クラスを作って使うことができたようなのでメモ。（適当にやってみただけなので問題があれば教えてください）

ベースとなるクラスを作成する

まずはベースとなる、共通メソッドを含めたクラスを定義する。テンプレートは書かないのでtsファイルに書く。

import { Vue, Component } from 'vue-property-decorator'

@Component
export default class BaseEditor extends Vue {
  isiPhone() {
    if (window.navigator.userAgent.match(/iPhone/)) {
      return true
    }
    return false
  }
}

継承する

あとは継承して使うだけ。

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

@Component
export default class BoardEditor extends BaseEditor {

Mixinは？

一応Vue.jsにはMixinという仕組みもあるのだが、TypeScriptだと結構面倒っぽい。色々方法はありそうだが、継承したコンポーネント側でもメソッドの定義を書かないといけなかったり、複数のMixinを使うために独自に関数を用意しなければならなかったりと、今のところ厳しそうな感じがある。今後ちゃんと使えるようになるのだろうか…？

テンプレートも共通化したい場合は

テンプレートも使いまわしたい場合は継承するのではなく、共通のコンポーネントを書いてそれを各コンポーネントに配置したほうが良さそう。