關於在Vue中Typescript的寫法

根據官方文檔 -》 Vue.js

目前暫時有兩種在Vue中運用typescript的方法

Vue.extend

  import Vue from 'vue'

  const Component = Vue.extend({
  // type inference enabled
  name: "Estend",
  data() {
      return {

      }
  },
  methods:{

      }
  })

學習成本最低， 只是在外面套一層外殼,還是按照以前的方式書寫，但是Vue.extend需要結合mixins使用的時候， 在mixins寫的代碼，typescript 會識別不到。

 

vue-class-component

基於官方維護的裝飾器，有vue-property-decorator和vuex-class

而vue-property-decorator 包含的裝飾器有以下

• @Componnent

• @Prop

• @Watch

• @Emit

• @Provide

• @Inject

• 還有@Model @PropSync 的這兩個，不過一幫很少用

 

關於mixin 混入的寫法等下再介紹

基本寫法就和下方差不多，注意點：

1.聲明一個組件的時候@Component 一定要寫上，不管有沒有引入別的組件也要寫上

2.對於以前data 屬性，直接在class 里面聲明即可

3.對於Computed 不需要再寫computed的字眼只需要寫get or set

4.對於Prop 你需要傳多少個參數就寫多少個 @Watch 同理

5.對於method 聲明是public Or private 即可

6.對於@Emit 就如下圖所示

import { Component, Vue, Prop } from 'vue-property-decorator';
import { State, Getter } from 'vuex-class';
import { componentA, componentB } from '@/components';
@Component({
  components:{ componentA, componentB},
})
export default class HelloWorld extends Vue{
@Prop(Number) readonly propA!: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC!: string | boolean | undefined

// 原data
message = 'Hello'

// 計算屬性
  private get reversedMessage (): string[] {
  return this.message.split('').reverse().join('')
}
private set reversedMessage (value:string): string[] {
  this.$emit('xxx')
}

// method
public changeMessage (): void {
  this.message = 'Good bye'
},
public getName(): string {
  let storeName = name
  return storeName
}
  // 生命周期
private created ()：void { },
private mounted ()：void { },
private updated ()：void { },
private destroyed ()：void { }
@Emit('callback')
private getCallback() {
 this.$emit('xxx');
}
}

對於@provide 和@inject 如下圖所示

 

對於mixin 的寫法，目前看到比較正確的一種形式

• 通過繼承mixin 的方式來享用同樣的方法
 

對於聲明周期，測試和以前類似， 一般為private。