vue + typescript

前言

使用typescript有一年时间了，期间遇到了很多坑，总结一下
ts的安装我就不提了，现在的开发基本都依赖于vue-cli脚手架，安装的时候勾选上ts就行了
脚手架结合ts使用的区别看一段代码

常规使用

<template>
   <div>
      <div @click='changeData'>{{content}}</div>
  </div>
   
</template>
// 规定类型是ts
<script lang="ts">
//引用vue-property-decorator 装饰器
    import {Vue, Component} from 'vue-property-decorator';
// 组件注入
    @Component
    export default class Crumbs extends Vue{
      // 申明变量时，不在需要申明data() {return {}}
       content: '测试ts'，
      
     // 父组件流下来的数据
      @Prop({default: 'zhangsan'})
      name!: string
      @Prop({default: '25'})
      age!: number
         
      // 申明方法时，不需要methods() {}
      changeData() {
          this.content = '改变内容'
      }
    
    }
</script>

在当前组件内引用其他组件

<template>
       <div>
      <div @click='changeData'>{{content}}</div>
      <A></A>
  </div>
</template>
// 假如当前组件目录下有一个组件A，引入A组件
<script lang="ts">
  import A from ‘./A.vue’
    // 组件注入
    @Component(components: {
       A,
    },)
<script>