Vue单文件组件TypeScript写法

最近学习TypeScript（简称ts），用vue2.6.11+TypeScript3写了一个本地记账项目，ts在vue的单文件模版中写法和传统vue单文件模版挺不一样的。在此记录一下其中的区别。

ts是js的超集，严格的js，变量定义输入输出都需要规定相应js类型。到目前vue单文件模版一共有三种方式书写。

• 传统对象写法，data() {return{}}。

• ts写法：

   

  实际上vue的作者写了一个装饰器 vue-class-component，不过不太好用，watch监听器相关按照文档使用得不到监听的效果。

  我这里推荐使用 vue-property-decorator 装饰器，这个库与vue结合的更好更易使用，vue常用的方法都能在这个库中找到对应的装饰写法。当然并不会全部都有，如果没有找到，我们还可以引用 vue-class-component 在vue作者的库中找到其余的写法。

   

  补充

  ts类型声明可以在src文件目录下中命名一个.d.ts结尾的ts文件，用来储存全局自定义的类型声明，ts会自动识别这个文件并作用到src目录下的所以文件，这样就不用每个文件单独做一次类型声明。

  每个普通文件：

  集中在src目录下.d.ts文件声明：

  文件名可任意取名，声明后，普通组件可直接使用ts类型声明，无需再另做局部声明。

  

  // ts全局自定义类型的文件
  type RecordItem = {
      tags: string[];
      notes: string;
      type: string;
      amount: number;
      createdAt?: string;
  }

   

  附录

  vue-class-component官方文档：vue-class-component

  vue-property-decorator文档：vue-property-decorator