ウェブサイト検索

Vue.jsとTypeScriptを使用してクラスベースのコンポーネントを書く方法

紹介

Vue.js 2はクラススタイルのコンポーネントをサポートしています。Angular（2+）の背景を持っている場合、プロパティとデコレーターを使用してコンポーネントのより複雑な部分を記述するクラスとしてコンポーネントを書くパターンにおそらく慣れているでしょう。

クラススタイルコンポーネントが標準のVue.jsコンポーネントに対して持つ最大の利点は、コンパイルされたコンポーネント内でのthisが実際に指す場所をより明確にし、より簡潔なコードを可能にすることです。

この記事では、Vue.jsのクラスベースのコンポーネントでTypeScriptをサポートするために、vue-class-componentとvue-property-decoratorを使用する方法について紹介します。

前提条件

この記事を読み進めるには、次のものが必要です:

  • Node.jsがローカルにインストールされている必要があります。これは「Node.jsのインストール方法とローカル開発環境の作成方法」に従って行うことができます。
  • Vue.jsプロジェクトとシングルファイルコンポーネントの設定にある程度の慣れがあること。
  • TypeScriptの規約に多少の慣れがあります。

このチュートリアルは、Node v15.1.0、npm v6.14.8、Vue.js v2.6.11、TypeScript v3.9.3、@vue/cli v4.5.0、vue-class-component v7.2.3、vue-property-decorator v8.4.2で確認されました。

ステップ1 — プロジェクトの設定

あなたはvue-class-componentとvue-property-decoratorがインストールされている必要があります。

新しい Vue.js プロジェクトを作成するには、@vue/cli を使用できます:

  1. npx @vue/cli create vue-typescript-example

このチュートリアルの目的のために、設定には以下が必要です:

プロンプトオプション
Please pick a preset
Manually select features
Check the features needed for your project
TypeScript
Use class-style component syntax?
Yes

@vue/-plugin-typescript は typescript、vue-class-component、および vue-property-decorator をインストールします。

次に、プロジェクトディレクトリに移動します。

  1. cd vue-typescript-example

この時点で、TypeScriptとクラススタイルのコンポーネント用に設定されたVue.jsプロジェクトがあります。

ステップ2 — TypeScriptを使用した単一ファイルコンポーネントの作成

クラスコンポーネントは、TypeScriptのclassで、Vueオブジェクトをextendsします。シングルファイルコンポーネントでは、<script>の言語をtsに設定し、クラスをdefaultとしてエクスポートすることを確認してください。

コードエディタでApp.vueを開き、TypeScriptを使用してこのシングルファイルコンポーネントの例を作成します:

<template>
  <div>
    <label>Update myDataProperty
      <input :value="myDataProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myDataProperty }}</div>
  </div>
</template>

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

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string = 'Data Property'

  // Component method
  updateMyProperty ($event: { target: { value: string } }) {
    this.myDataProperty = $event.target.value
  }
}
</script>

データプロパティがクラスおよびメソッドに直接定義されていることに注意してください。

@Component(componentConfig) デコレーターがこれを可能にします。それはクラスをコンパイルプロセス中に Vue.js が理解できる形式に変換します。

この時点で、ブラウザでアプリケーションをコンパイルして観察すると、入力フィールドと「データプロパティ」という言葉が表示されます。入力フィールドと対話することで、myDataPropertyが更新され、行われた変更が反映されます。

ステップ3 — コンポーネントのプロパティを使用する

vue-property-decoratorの@Prop(config)デコレーターを使用することで、データプロパティと同様に入力プロパティを宣言することができます。

ここに、デフォルト値が'入力プロパティ'であるコンポーネントプロパティexamplePropertyを取るTypeScriptの例があります:

<template>
  <div>{{ exampleProperty }}</div>
</template>

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

@Component
export default class App extends Vue {
  @Prop({ default: 'Input Property' })
  exampleProperty!: string
}
</script>

JavaScriptでは、これは次のように等価です:

export default {
  props: {
    exampleProperty: {
      type: String,
      default: 'Input Property'
    }
  }
}

この時点で、ブラウザでアプリケーションをコンパイルして観察すると、Input Propertyというメッセージが表示されます。

ステップ4 — 計算プロパティの使用

計算プロパティは、クラスにおいてゲッターおよびセッターとして書かれます。

ここに、myComputedPropを取得し、ランダムな数値を返すTypeScriptの例があります:

<template>
  <div>{{ myComputedProp }}</div>
</template>

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

@Component
export default class App extends Vue {
  get myComputedProp() {
    return Math.random()
  }
}
</script>

JavaScriptでは、これは次のように等価です:

export default {
  computed: {
    myComputedProp() {
      return Math.random()
    }
  }
}

この時点で、アプリケーションをコンパイルしてブラウザーで観察すると、ランダムな数字が表示されます。

ステップ5 — ウォッチャーの使用

ウォッチャーは@Watch(propertyString, config)デコレーターを使用して作成できます。

ここで、myWatchedPropertyがonPropertyChangedをトリガーするのを監視するTypeScriptの例を示します:

<template>
  <div>
    <label>Update myWatchedProperty
      <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myWatchedPropertyStatus }}</div>
  </div>
</template>

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

@Component
export default class App extends Vue {
  myWatchedProperty: string = 'Watched Property'
  myWatchedPropertyStatus: string = ''

  @Watch('myWatchedProperty')
  onPropertyChanged(value: string, oldValue: string) {
    this.myWatchedPropertyStatus = 'Watched Property Changed'
  }

  updateMyProperty ($event: { target: { value: string } }) {
    this.myWatchedProperty = $event.target.value
  }
}
</script>

JavaScriptでは、これは次のように等価です:

export default {
  data() {
    return {
      myWatchedProperty: null
    }
  }

  methods: {
    onPropertyChanged(value, oldValue) {
      // ...
    }
  }

  watch: {
    myWatchedProperty: {
      handler: 'onPropertyChanged',
      immediate: false,
      deep: true
    }
  }
}

この時点で、ブラウザにアプリケーションをコンパイルして表示すると、入力フィールドが表示されます。入力値を変更すると、メッセージ Watched Property Changed が表示されます。

結論

この記事では、Vue.jsのクラスベースのコンポーネントでTypeScriptをサポートするために、vue-class-componentとvue-property-decoratorを使用する方法について学びました。

この記事では@Component、get、およびsetについて紹介しました。vue-class-componentから利用可能な宣言の完全な一覧については、公式ドキュメントを参照してください。

この記事では、@Propと@Watchも紹介されています。vue-property-decoratorから利用可能なデコレーターの完全なリストについては、公式ドキュメントを参照してください。

TypeScriptについてさらに学びたい場合は、演習やプログラミングプロジェクトのためのTypeScriptトピックページをご覧ください。

関連記事: