详解Vue2.5+迁移至Typescript指南(3)

import { Vue, Component, Ref } from 'vue-property-decorator' import Form from '@/path/to/another-component.vue' @Component export default class YourComponent extends Vue { @Ref() readonly form!: Form }

等同于

export default { computed() { form: { cache: false, get() { return this.$refs.form as Form } }, } }

这样我们就可以通过 this.form.validate()来做表单校验了

新手容易遇到的一些问题

疑问1：interface和type有什么区别？

type 可以声明基本类型别名，联合类型，元组等类型

eg.type a = string;是被允许的，

interface 会自动声明合并

interface person{ gender:string age:number } interface person{ name:string }

疑问2: 错误 Property 'hideContent' has no initializer and is not definitely assigned in the constructor.

strictPropertyInitialization属性会在strict设置为true时自动被设置为true。

但这个属性并不合理，它要求每个实例的属性都有初始值，我们在tsconfig将其设置为false就好了。

疑问3: 赋值兼容性

interface person { name:string age:number } interface student { name:string age:number stuid:string } let person: person= { name:'name', age:1 } let student: student = { name:'name', age:1, stuid:'stuid' }; person = student //这样是可以的 student = person //这样不允许