TypeScriptTweetこんにちは。エンジニアの小椋です。createの時に対話形式でTypeScriptを使うかどうかを選択することができるようになりました。今回はそれを使って初めからTypeScript標準搭載のプロジェクトを作ります。featuresを選びます。ラジオボタンが出てくるので、スペースキーで◉TypeScriptにチェックを入れ、エンターキーで確定します。今回は◉Routerもプリセットで追加しておきました。(Y/n)と聞かれます。後で解説するクラス記法を使用するかどうかの質問なのですが、とりあえずYにします。syntaxを使用する場合、vue-class-componentモジュールが追加で必要になります。Yを選択すると、プリセットの生成時に自動でインストールされます。)残りの質問も全部Yにしておきましょう。tslint.jsonルートディレクトリにtsconfig.json、tslint.jsonなどTypeScript関連のファイルが生成されているのが確認できます。開発サーバーを起動しておきましょう。serveTypeScriptじゃないHelloWorldとちょっと中身が違いますね。TypeScriptを使った.vueファイルの書き方Vue.jsを使ったことがある人は、src/components/HelloWorld.vueなどを見ると、よく知っている.vueファイルと若干様子が違うことが分かると思います。string;}</script>scriptタグ部分にlang="ts"と指定があるlang="ts"を書き忘れると、そのvueファイルでTypeScriptの記法は使えません。コンパイルエラーになります。Vueオブジェクトをextendsしたclassベースの記法になっているこちらが今回の本題です。Vue.jsでは今までオブジェクト形式でdataやmethodsなどを全て定義して、Vueインスタンスをnewする特有な書き方に馴染みがあると思います。Component記法を利用することができます。Component(以下クラス記法)の書き方を紹介します。vue-routerをプリセットで選択した時に入っているsrc/views/About.vueファイルを編集していきます。'About',}</script>このように書きますが、クラス記法の場合は以下のように書きます。{}</script>@Componentは、vue-property-decoratorという公式サポートのライブラリを利用して、直下で宣言されているクラスがVueコンポーネントであることを示すアノテーションです。dataの定義ここからはコンポーネントのプロパティの書き方です。}}</script>クラス記法ではメンバ関数として書けます。}}</script>クラス記法ではgetterとsetterとして書くことでcomputedプロパティを表すことができます。...}</script>クラス記法では特定の名前のクラスメンバメソッドとして書くことでライフサイクルフックを定義できます。...}</script>props、emit、watchなどの定義クラス記法では、これらはvue-property-decoratorでアノテーションとしてサポートされています。}}</script>なんか@Emitはちょっとくどい感じしますね。'hello')は使えます。Vue()するときと同じような挙動になります。{}みたいなことができます。何に使うんだ、、、って感じですが、filtersとかアノテーションが用意されていないプロパティは@Componentに渡すことで実装できます。(クラスと離れたところに書かなきゃいけないので多少可読性が落ちますね・・・)まとめVue.jsでTypeScriptを使うメリットこれは一般的にTypeScriptを使うメリットとほとんど同じです。あとメリットとしては、個人的にはクラス記法は可読性が高いと思うので好みです。TypeScript慣れしている人やオブジェクト指向言語の開発に馴染みのある人ならなおさらそうだと思います。既存のVueプロジェクトに追加でTypeScriptを導入する場合なんかは、通常の記法で静的型付けを行うのがいいのではないでしょうか。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。