開発者ドキュメント

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

getdocs

序章

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

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

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

前提条件

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

このチュートリアルは、Nodev15.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/cli 新しいVue.jsプロジェクトを作成するには：

  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 それ extends the Vue 物体。 単一ファイルコンポーネントでは、必ず設定してください <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>

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

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

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

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

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

これはTypeScriptの例です。 exampleProperty デフォルト値が 'Input Property':

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 クラスで。

これがTypeScriptの例です。 getsa myComputedProp 乱数を返します：

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) デコレータ。

これは、いつを監視するTypeScriptの例です。 myWatchedProperty トリガー onPropertyChanged:

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トピックページで演習とプログラミングプロジェクトを確認してください。

モバイルバージョンを終了