Vue.jsのscript内に型定義有りのコードを書きたい

通常のJSで書いていくのは辛いので、vue-property-decoratorを利用してTypeScriptで開発していきます。
対象のプロジェクトにはあらかじめTypeScriptがインストールされているものとします。¹

インストール

$ npm install --save vue-property-decorator

基本

Component

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

@Component
export default class MyComponent extends Vue {
}
</script>

これはJavaScriptで以下のように書いたものと同じです。

<script>
export default {
  name: 'MyComponent'
}
</script>

Vue.jsとTypeScriptでコンポーネントのロジック部分を書いていく際はvue-property-decoratorというパッケージを利用します。
nameは明示的に宣言することもできますが、クラス名として宣言することで省略可能です。

Data

コンポーネント内のdataは、クラスのメンバ変数として宣言します。
比較のために、JavaScriptで書くケースも載せておきます。

// TypeScript
@Component
export default class MyComponent extends Vue {
  private msg = 'サンプルメッセージ'
  private users: Array<string> = [
    '山田',
    '田中'
  ]
}

// JavaScript
export default {
  data() {
    return {
      msg = 'サンプルメッセージ',
      users: [
        '山田',
        '田中'
      ]
    }
  }
}

Computed

TypeScriptではcomputedはプレフィックスgetをつけて記述します。
戻り値として指定した型とreturnで返す値の型は一致させる必要があります。

// TypeScript
export default class MyComponent extends Vue {
  get profile(): string {
    return `Hi, My name is ${this.name} and I am ${this.age} years old!`
  }
}

// JavaScript
export default {
  computed: {
    profile() {
      return `Hi, My name is ${this.name} and I am ${this.age} years old!`
    }
  }
}

Props

vue-property-decoratorから{ Prop }をインポートし、コンポーネント内に記述します。
JavaScriptのPropsの受け渡しと同様に、TypeやRequired等の属性を指定できます。

// TypeScript
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
  @Prop() message: string
  @Prop({ default: '山田' }) name: string
  @Prop({ required: true }) age: number
  @Prop({ type: String, required: false, default: 'Nagoya' }) address: string 
}

// JavaScript
export default {
  props: {
    message,
    name: {
      default: '山田'
    },
    age: {
      required: true
    },
    address: {
      type: String,
      required: false,
      default: 'Nagoya'
    }
  }
}

Methods

// TypeScript
import { Component, Vue } from 'vue-property-decorator'
@Component
@Component
export default class MyComponent extends Vue {
  public incrementAge(): void {
    this.age++
  }
  public sum(num1: number, num2: number): number {
    return num1 + num2
  }
}

// JavaScript
export default {
  methods: {
    incrementAge() {
      this.age++
    },
    sum(num1, num2) {
      return num1 + num2
    }
  }
}

Watch

@Watchを宣言して以下のように書きます。

// TypeScript
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
  private message: string
  private age: number

  @Watch('message')
  changedMessage() {
    this.message = 'The message has been changed.'
  }
  @Watch('age')
  changedAge(newVal: number, oldVal: number) {
    console.log(`new: ${newVal}, old: ${oldVal}`)
  }
}

// JavaScript
watch: {
  message() {
    this.message = 'The message has been changed.'
  },
  age(newVal, oldVal) {
    console.log(`new: ${newVal}, old: ${oldVal}`)
  }
}

おわりに

今回はVue.jsとTypeScriptでdecoratorを使用したComponent, Data, Props, Methods, Watchの書き方を説明しました。
他にも方法があるようなので、また勉強して記事を書こうと思います。
最後まで読んでいただき、ありがとうございました！

前回の記事vue-cli3 + TypeScript + Electronでアプリを開発するを参照 ↩

Vue.jsでTypeScriptを使う(with vue-property-decorator)