使用ts开发vue项目知识点1

用ts开发项目变化还是挺大的

由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在根目录下

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

　　

1，单文件组件导出对象写法变了

原来直接export default {}

现在导出也是一个对象，这个对象的写法完全变了，它不是es6的的写法，不是类似react那种写法而是ts的写法，准备的说更像强类型语言写法，很像java。比如用private、publish以及protected声明变量。

   private foo = 'App Foo!';
    private aa = 1

 

2，组件注册、watch、props以及computed

说是像java又不是java，至少我认知里面java里面是没有修饰器的。修饰器是ES7的提案，修饰器本质上是一个函数，是一个对类的行为作出修改。

vue-property-decorator这个东西是依赖于vue-class-component，可以简化书写。然后响应的写法发生了变化：

@Component({
  components: {
    HelloWorld
  }
}) // 组件
    @Prop({
       type: Object,
       required: false,
       default: {}
     }) // props
    @Prop({
      type: Object,
      required: false,
      default: {}
    })
// watch
   @Watch('formData', { immediate: true, deep: true })
     @Watch('formData1', { immediate: true, deep: true })
// 计算属性
   get ValA(){
            return 1;
        }

　　

当然emit也变了

@Emit('reset')

更多的用法在这里：https://www.npmjs.com/package/vue-property-decorator

 

3，周期函数

变为对象的一个普通函数了，在对象里面直接写mounted(){}就行了，当然因为ts是强类型语言，所以需要在函数位置标记返回类型