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) {}
}复制代码