Vue.jsとTypeScriptを使用してクラスベースのコンポーネントを作成する方法

序章

Vue.js2はクラススタイルのコンポーネントをサポートしています。 Angular（2+）のバックグラウンドを使用している場合は、プロパティとデコレータを使用してコンポーネントをクラスとして記述し、コンポーネントのより複雑な部分を記述するパターンに精通している可能性があります。

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

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

前提条件

この記事をフォローするには、次のものが必要です。

• 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-componentv7で検証されました。 2.3、およびvue-property-decoratorv8.4.2。

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

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

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

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をインストールします。

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

cd vue-typescript-example

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

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

クラスコンポーネントは、extendsVueオブジェクトであるTypeScriptclassです。 単一ファイルコンポーネントでは、<script>言語をtsに設定し、クラスをdefaultとしてエクスポートしてください。

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

src / App.vue

<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が理解できる形式に変換します。

この時点で、アプリケーションをコンパイルしてブラウザーで観察すると、入力フィールドとData Propertyという単語が表示されます。 入力フィールドを操作することにより、myDataPropertyが更新され、加えられた変更が反映されます。

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

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

これは、examplePropertyをデフォルト値の'Input Property'のコンポーネントプロップにするTypeScriptの例です。

src / App.vue

<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—計算されたプロパティの使用

計算されたプロパティは、クラスにgettersおよびsettersとして書き込まれます。

get sa myComputedPropであり、ランダムな数値を返すTypeScriptの例を次に示します。

src / App.vue

<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の例を次に示します。

src / App.vue

<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-class-componentとvue-property-decoratorを使用してVue.jsクラスベースのコンポーネントでTypeScriptをサポートする方法を学びました。

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

この記事では、@Prop、および@Watchも紹介しました。 vue-property-decoratorから入手できるデコレータの完全なリストについては、公式ドキュメントを参照してください。

TypeScriptの詳細については、TypeScriptトピックページで演習とプログラミングプロジェクトを確認してください。