Vue中用TypeScript改写JavaScript及装饰器使用

TypeScrpt相比JavaScript的主要特点

• 多了属性声明类型，格式：属性名：声明类型

name:string="";  //此时name属性声明类型为string

• 使用class类来引入或暴露内容 TypeScript中将所有属性和方法封装成类，用类的形式引入或暴露其内容，在vue中具体示例可见下文“基本格式”。

基本格式

组件<script>中要加lang="ts"

import Vue from "vue"; // 导入vue声明
import Component from "vue-class-component"; // 导入组件装饰器
import {MyClassApi } from "@/api/myClassApi";//导入路径为@/api/下的myClassApi.ts文件中的MyClassApi 类
@Component({}) // Component装饰器装饰Login类（声明此为组件）
export default class MyVueTypeScript extends Vue {
  name：string = "";//属性格式：用=赋值，避免用：，因为：代表声明属性数据类型，属性后要加；
  myClass: MyClassApi = new MyClassApi();//新建一个类
                          //（MyClassApi为之前myClassApi.ts文件里声明的类，此处来新建创建此类并接收）
  MyMethod(param) {   //方法格式：直接用函数调用的格式，无需用声明函数形式，且方法后不加；
    let apiname = this.myClass.apiName+param;  //调用MyclassApi类中的属性，与参数拼接
    console.log(apiname);
  }

在路径@/api/下的myClassApi.ts文件中暴露class对象

export class MyClassApi {   //声明类名时首字母必须大写，并使用驼峰命名
   apiName:string ="api";
   apiMethond(){
       //编写相关方法
   }

}

Vue组件装饰器的使用说明

在上述代码中，装饰器用的vue-class-component，TypeScript中还有另一个装饰器vue-property-decorator 这两个装饰器功能一样，但是用法格式有所不同，在涉及组件传值的时候略有区别。

假设子组件为@/myComponent/路径下的myChildComponent.vue文件，文件中：

   export class MyChildComponent {   //声明类名时首字母必须大写，并使用驼峰命名
    childName:string ="";
    childMethond(){
                //编写相关方法
   }

• 先介绍vue-class-component，此中只有一个实例Component,导入时用

import Component from "vue-class-component" 使用格式如下：

import Vue from "vue";
import Component from "vue-class-component";
import MyChildComponent from '@/myComponent/myChildComponent.vue';   // 导入子组件
                            //导入vue文件时文件名必须加后缀，否则识别不出来
@Component({
    components:{
        MyChildComponent  // 导入子组件
    },
    props: {              //父组件向子组件传值格式
        fatherMessage: String
    }
})
export default class MyVueTypeScript extends Vue {
    name:string = "";
    
}

此时父子组件传值时，只是把内容写在装饰器@Component中，其内容写法与vue没有区别

• 再来看vue-property-decorator的用法 vue-property-decorator中有多个组件装饰器，这个插件是依赖于vue-class-component的，它将vue所有组件的用法都规定成了装饰器的写法,使用格式如下：

import Vue from "vue";
import { Component, Prop } from "vue-property-decorator" ;  // 导入多个组件的方式

@Component({})
export default class MyVueTypeScript extends Vue {
  @Prop()                     //所有vue用法都转变成装饰器用法（此装饰器为声明prop）
  fatherAge: number

  @Prop({ default: '张三' })  //装饰器用法中传默认值
  fatherName: string
  
  @Prop([String, Boolean])   //// 多个可能的类型(stringhuoboolean类型)
  ifWork: string | boolean
  
  @Watch('name')
  onrNameChanged(val: string, oldVal: string) {

  }
}