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の規則にある程度精通している。
このチュートリアルは、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プロジェクトを作成するには:
- 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を使用して単一ファイルコンポーネントを作成する
クラスコンポーネントはTypeScriptです class
それ extends
the Vue
物体。 単一ファイルコンポーネントでは、必ず設定してください <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>
データプロパティはクラスとメソッドで直接定義されていることに注意してください。
The @Component(componentConfig)
デコレータはこれを可能にするものです。 クラスを、コンパイルプロセス中にVue.jsが理解できる形式に変換します。
この時点で、アプリケーションをコンパイルしてブラウザで観察すると、入力フィールドと単語が表示されます。 Data Property
. 入力フィールドと対話することにより、 myDataProperty
更新され、行われた変更が反映されます。
ステップ3—コンポーネントプロップを使用する
の使用を通じて @Prop(config)
からのデコレータ vue-property-decorator
、データプロパティとほぼ同じ方法で入力プロパティを宣言できます。
これはTypeScriptの例です。 exampleProperty
デフォルト値が 'Input Property'
:
<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の例です。 get
sa myComputedProp
乱数を返します:
<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
:
<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トピックページで演習とプログラミングプロジェクトを確認してください。