Vue.jsでTypeScript入門 [class-style component]

2019年7月2日

Vue.jsにおいてTypeScriptを利用し、クラススタイルによってコンポーネント(class-style component)を記述していく説明をしていきます。

 

vue cli でプロジェクトを作成します。vue cli については下記関連ページをご覧下さい。

 

関連ページ

Vue CLI 3 ではじめるVue RouterとVuex入門

 

バージョンを確認。

 

 

プロジェクトの作成


 

プロジェクトを作成します。今回は「sample-project」という名前にします。

 

「Manually select features」を選択します。

 

「TypeScript」を選択し、今回は下記のように設定しました。

 

クラススタイルでの記述によってコンポーネントを作成するので、「Use class-style component syntax?」はYesを選択します。

 

後は適当に選択していきます。インストールが完了すると下記のように表示されます。

 

 

TypeScriptとclass-styleによるcomponentの記述


 

TypeScriptを利用したクラススタイルでのコンポーネント記述の概要をつかむために、すでに生成されている HelloWorld.vue を利用します。下記のように編集しました。

 

関連ページ

TypeScriptのインストールからコンパイルまで入門

 

src/components/HelloWorld.vue

12行目

単一ファイルコンポーネントによってTypeScriptを利用するためにlang=”ts”を設定します。

 

13行目

vue-class-component を利用するとTypeScriptかつクラススタイルでの記述ができるようになります。また、このvue-class-component に依存した vue-property-decorator によってVue.jsの機能をデコレータによって追記していくことができます。

 

例えば15行目の@Componentデコレータによって、Vue.jsのdataオプションは、クラスのプロパティとして記述できるようになります(例:19、20行目)。またmethodsオプションは、クラスのメソッドとして記述できます(例:22〜24行目のcountNum())。

 

17行目

propsの記述は、@Propデコレータを利用します。名称に「!」を付与する必要があります。

 

26〜28行目

算出プロパティであるcomputedオプションもメソッドとして記述できます。その場合ゲッター(getter)およびセッター(setter)としてのアクセサを記述する必要があります。上記ではgetアクセサを付与し、8行目で小文字に変換した文字列を表示させています。

 

30〜33行目

watchオプションは、vue-property-decoratorによる@Watchデコレータによって記述しています。13行目においてwatchをimportしています。

 

35〜37行目

ライフサイクルフック(lifecycle hooks)もクラスのメソッドとして記述できます。

 

 

以上のような感じで、TypeScriptとクラススタイルによってコンポーネントを記述していくことができます。

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー