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


関連記事

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

フォロー

blog-page_side_responsive

2019年7月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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