はじめに
Vue CLI 3からプロジェクト生成時にTypeScriptを選べるようになり、Vue.jsを手軽にTypeScriptで書くことができるようになりました。それにより、TypeScriptのクラス構文を使って記述することができるようになるため、コードをよりシンプルに書くことができるようになります。
TypeScriptのクラス構文を使った書き方は従来の書き方とはだいぶ異なります。そこで、 data や methods などのよく使う項目をTypeScriptのクラス構文で記述する方法を紹介します。TypeScriptを使うプロジェクトの作成方法についてはこちらの記事を御覧ください。
TypeScriptでの書き方
それでは、TypeScriptのクラス構文での書き方を見ていきましょう。
定義
まずはじめに定義に仕方を見ていきましょう。JavaScriptでは以下のように記述します。
| 1 2 3 | <script> export default {} </script> |
TypeScriptでは以下のようになります。
| 1 2 3 4 5 | <script lang="ts"> import { Vue } from "vue-property-decorator" export default class Home extends Vue {} </script> |
vue-property-decorator はVueをTypeScriptの構文で書くためのツールです。
data
data はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 10 | <script> export default { data() { return { hoge: "fuga", foo: "bar", }; }, } </script> |
TypeScriptではクラスのプロパティとして定義します。
| 1 2 3 4 5 6 7 8 | <script lang="ts"> import { Vue } from "vue-property-decorator" export default class Home extends Vue { hoge: string = "fuga" foo: string = "bar" } </script> |
methods
methods はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 10 11 12 | <script> export default { methods: { hoge() { return "fuga"; }, foo(bar) { retrun bar; }, }, } </script> |
TypeScriptではクラスのメソッドとして定義します。
| 1 2 3 4 5 6 7 8 9 10 11 12 | <script lang="ts"> import { Vue } from "vue-property-decorator" export default class Home extends Vue { hoge() { return "fuga" } foo(bar) { return bar; } } </script> |
computed
computed はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script> export default { data() { return { firstname: "Taro", lastname: "Yamada". }; }, computed: { fullname: { get: function() { return this.firstname + this.lastname; }, set: function(name) { var names = name.split(" "); this.firstname = names[0]; this.lastname = names[1]; }, }, } } </script> |
TypeScriptではアクセサーとして定義します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script lang="ts"> import { Vue } from "vue-property-decorator" export default class Home extends Vue { firstname: string = "Taro" lastname: string = "Yamada" get fullname() { return this.firstname + this.lastname } set fullname(name) { const names = name.split(" ") this.firstname = names[0] this.lastname = names[1] } } </script> |
props
props はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> export default { props: { foo: { type: String, required: true, }, bar: { type: Number, default: 0 }, }, } </script> |
TypeScriptでは @Prop を使って記述します。
| 1 2 3 4 5 6 7 8 | <script lang="ts"> import { Prop, Vue } from "vue-property-decorator" export default class Home extends Vue { @Prop({ required: true }) private foo!: string @Prop() bar: number = 0 } </script> |
emit
emit はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 | <script> export default { methods: { foo() { this.$emit("event", "bar") }, }, } </script> |
TypeScriptでは @Emit を使って記述します。
| 1 2 3 4 5 6 7 8 9 10 11 | <script lang="ts"> import { Emit, Vue } from "vue-property-decorator" export default class Home extends Vue { @Emit("event") fooEvent(val: string): void {} foo() { this.fooEvent("bar") } } </script> |
lifecycle hooks
created などの lifecycle hooks はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 10 11 12 | <script> export default { data() { return { foo: null, }; }, created() { this.foo = "bar"; }, } </script> |
TypeScriptでも同様に記述します。
| 1 2 3 4 5 6 7 8 9 10 11 | <script lang="ts"> import { Vue } from "vue-property-decorator" export default class Home extends Vue { foo: string | null = null; created() { this.foo = "bar" } } </script> |
components
compoents はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 | <script> import Hoge from "@/components/Hoge"; export default { components: { Hoge }, } </script> |
TypeScriptでは @Compoent を使って記述します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <script lang="ts"> import { Component, Vue } from "vue-property-decorator" import Hoge from "@/components/Hoge" @Component({ components: { Hoge } }) export default class Home extends Vue { } </script> |
filters
filters はJavaScriptでは以下のように記述します。
| 1 2 3 4 5 6 7 8 9 | <script> export default { filters: { foo(val) { return val + "bar"; }, }, } </script> |
TypeScriptでは @Compoent を使って記述します。
| 1 2 3 4 5 6 7 8 9 10 11 12 | <script lang="ts"> import { Component, Vue } from "vue-property-decorator" @Component({ filters: { foo(val: string): string { return val + "bar" } } }) export default class Home extends Vue {} </script> |
さいごに
TypeScriptでVue.jsのコードを記述する方法を紹介しました。新しくプロジェクトを作る場合はぜひTypeScriptのクラス構文で書いてみてください。
おすすめ書籍
