vue+typeScript

这篇文章讲的很通俗易懂，就分享一下
[如何使用 vue + typescript 编写页面 ( 基础装饰器部分 )]
(https://juejin.im/post/5c662a7de51d4562e71c4277)
这篇文章的后半部分很赞
[# vue + typescript 项目起手式
]
(https://segmentfault.com/a/1190000011744210)
首先用vue-cli3.0选择typeScript下载脚手架.
1.vue create vuets,选择Manually select features
2.选择typescript vuex router babel css pre-processors
typescript+vue基本上都是语法格式的区别，思路都是不变的
1.页面里的如果需要prop,model,这些都是写子组建传值用的
import { Component, Prop, Vue, Model } from 'vue-property-decorator';
2.如果需要引入组建就在@Component里面写，如果不需要也要写上@Component

@Component({
     components: {
      HelloWorld,
    }
  })

3.在export里面写data,methods

export default class App extends Vue {
    // 初始化数据
    msg = 123

    // 声明周期钩子
    mounted () {
      this.greet()
    }

    // 计算属性
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // 方法
    greet () {
      alert('greeting: ' + this.msg)
    }
  }

上面的代码如下

export default {
  data () {
    return {
      msg: 123
    }
  }

  // 声明周期钩子
  mounted () {
    this.greet()
  }

  // 计算属性
  computed: {
    computedMsg () {
      return 'computed ' + this.msg
    }
  }

  // 方法
  methods: {
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
}

一些装饰器的写法变化如下

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

上面代码相当于

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}

其他装饰器看链接
vue-property-decorator