2019-01-22に投稿

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を使うために独自に関数を用意しなければならなかったりと、今のところ厳しそうな感じがある。今後ちゃんと使えるようになるのだろうか…?

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

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


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント