Nuxt.jsでtypescriptの記法一覧

今回はNuxt.jsでtypescriptをどう書いていったのかを備忘録として残していきたいと思います。

//test.vue
<template>
  <test2/>
</template>

<script lang="ts"> //typescriptで書く際にはここにlangで記述する

/* nuxt-property-decoratorをインポートする
*  {}内には使用したいDecoratorsを記述する
**/
import { Component, Inject, Model, Prop, Provide, Vue, Watch } from 'nuxt-property-decorator'
//他のコンポーネントをimportする際には絶対パスではなく相対パスで記述する
import Test2 from '../../test2.vue' 

@Component({
  Test2
})
export default class Test extends Vue{
  mounted() {
    console.log('test');
  }
  @Prop() //propsの記法
  prop1: number

  @Provide() test: string = 'test' //dataの記法　ここでも型付け（ここでいうとstring）が行える

  //computedの記法
  get foo(): number {
    return this.$store.state.test.id
  }

  //methodsの記法
  getId() {
    //省略
  }

  /* watchの記法
  * immediateをtrueにしておくと値がbindされた段階でメソッドを走らせる
  * deepをtrueにしておくとオブジェクトの監視時にオブジェクト内の変数の値変更もキャッチしてくれる
  **/
  @Watch('bar', {immediate: true, deep: true})
  getId(){}
}
</script>

実際にNuxtでの記法に直してみると下記のようになる

<template>
  <test2/>
</template>

<script>
export default {
  components: {
    Test2: () => import('../../test2.vue')
  }

  mounted() {
    console.log('test');
  }

  props: {
    prop1: Number
  }

  data() {
    return {
      test: 'test'
    }
  }

  computed: {
    foo() {
      return this.$store.state.test.id
    }

    methods: {
      getId() {
        //省略
      }
    }
  }
}
</script>