参考資料

【速習】vue-property-decorator - Qiita

vue.js + typescript = vue.ts ことはじめ - Qiita

vue-property-decoratorを使うにはvue-class-componentが使える状態にしておく必要がある

vue-class-componentとは

Vueのコンポーネントをクラススタイルの構文で作成できるライブラリ

@Componentデコレータでクラスにアノテーション（@）を付けることで、Vueを継承したクラスとしてコンポーネントのデータやメソッドを定義することができる

基本構文

<template>
  <div class="home">
    <MyButton></MyButton>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyButton from "@/components/MyButton.vue";

@Component({
  components: {
    MyButton,
  },
})
export default class HomeView extends Vue {}
</script>

Props

@Propは続けて定義したメンバーをpropsとして使用できるようになる

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class SampleComponent extends Vue {
  @Prop({ type: String, required: true })
  userName: string;

  @Prop({ type: Boolean, defualt: false })
  isVisible: boolean;
}
</script>

Data

Dataはクラスのメンバーとして定義するだけで利用できる

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class SampleComponent extends Vue {
  name = 'simochee';
  age: number | null = 21;
}
</script>

Computed

算出プロパティ（Computed）はクラスのGetterとして定義することで利用できる

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class SampleComponent extends Vue {
  score = 55;

  get triple() {
    return this.score * 3;
  }
}
</script>

メソッド

メソッドはクラスのメソッドとして定義するだけで利用できる