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


関連記事

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

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

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

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年7月
 123456
78910111213
14151617181920
21222324252627
28293031 

アプリ情報

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