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