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


関連記事

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年7月
« 6月 8月 »
 123456
78910111213
14151617181920
21222324252627
28293031 

アプリ情報

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