typescript里一个完整的.vue文件

• typescript里，.vue文件的template部分跟javascript一样无需修改
• vue-cli通过vue-property-decorator装饰器来实现typescript

一个标准的.vue文件:

<template>
//...
</template>
<script lang="ts">
  <script lang="ts">
import { Component, Vue, Watch, Prop, Emit } from 'vue-property-decorator'//引入装饰器
import { Dictionary } from 'vue-router/types/router'//引入Dictionary接口类型
import { Form as ElForm, Input } from 'element-ui'
import { UserModule } from '@/store/modules/user'//引入vuex
import { isValidUsername } from '@/utils/validate'//引入方法
import Cards from './components/Cards.vue'//引入组件
export interface BillMsgQuery {//声明接口
  pageNo: number
  pageSize: number
  selectYxStoreId: number
  beginDateTime?:number
  endDateTime?:number
}
@Component({
  name: 'Index',
  components: {
    Cards
  }
})
export default class extends Vue {
  @Prop({ default: false }) private isdowning!: boolean;//父组件传参props
  private orederType=[//data
    { name: '全部', label: -1 },
    { name: '普通订单', label: 1 }
  ]
  @Watch('page', { deep: true })//watch
  private onPageChange(value: number) {
    if (value === 1) this.pageNo = 1
  }
  @Emit('update:pageSize')//emit
  private pageSizeHandle(val: number) {
    return val // return将要传递的值
  }
  public get currPageSize() {//computed
    return this.pageSize
  }
  public set currPageSize(val: number) {//computed
    // this.$emit("update:pageSize", val);
    console.log('pagechange')
    this.pageSizeHandle(val)
  }
  mounted() {//mounted,created...
    this.initData()
  }
  //methods
  private handleSizeChange(val: number,params:BillMsgQuery) {
    this.currPageSize = val //设置computed值
    // this.$emit("update:page", 1);
    this.pageSizeHandle(1)
  }
}
</script>