FrontEnd

Vue.jsのコードをTypeScriptで書く

投稿日:

はじめに

Vue CLI 3からプロジェクト生成時にTypeScriptを選べるようになり、Vue.jsを手軽にTypeScriptで書くことができるようになりました。それにより、TypeScriptのクラス構文を使って記述することができるようになるため、コードをよりシンプルに書くことができるようになります。

TypeScriptのクラス構文を使った書き方は従来の書き方とはだいぶ異なります。そこで、 data や methods などのよく使う項目をTypeScriptのクラス構文で記述する方法を紹介します。TypeScriptを使うプロジェクトの作成方法についてはこちらの記事を御覧ください。

TypeScriptでの書き方

それでは、TypeScriptのクラス構文での書き方を見ていきましょう。

定義

まずはじめに定義に仕方を見ていきましょう。JavaScriptでは以下のように記述します。

TypeScriptでは以下のようになります。

vue-property-decorator はVueをTypeScriptの構文で書くためのツールです。

data

data はJavaScriptでは以下のように記述します。

TypeScriptではクラスのプロパティとして定義します。

methods

methods はJavaScriptでは以下のように記述します。

TypeScriptではクラスのメソッドとして定義します。

computed

computed はJavaScriptでは以下のように記述します。

TypeScriptではアクセサーとして定義します。

props

props はJavaScriptでは以下のように記述します。

TypeScriptでは @Prop を使って記述します。

emit

emit はJavaScriptでは以下のように記述します。

TypeScriptでは @Emit を使って記述します。

lifecycle hooks

created などの lifecycle hooks はJavaScriptでは以下のように記述します。

TypeScriptでも同様に記述します。

components

compoents はJavaScriptでは以下のように記述します。

TypeScriptでは @Compoent を使って記述します。

filters

filters はJavaScriptでは以下のように記述します。

TypeScriptでは @Compoent を使って記述します。

さいごに

TypeScriptでVue.jsのコードを記述する方法を紹介しました。新しくプロジェクトを作る場合はぜひTypeScriptのクラス構文で書いてみてください。

おすすめ書籍

基礎から学ぶ Vue.js Vue.js入門 基礎から実践アプリケーション開発まで 動かして学ぶ!Vue.js開発入門 (NEXT ONE)

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

フォロー

blog-page_side_responsive

2019年7月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。