怎么描述一个Vue组件实例的类型啊

来源：5-9 ValidateForm 编码第二部分 - 尝试父子通讯

慕莱坞0998854

2020-10-23

老师在尝试使用ref的方法拿到ValidateInput的组件的时候，写的是

	const inputRef = ref<any>()

然后我就想知道，如何去表示一个vue组件实例的类型呢？

经过搜索，我尝试写作

	const inputRef = ref<ComponentPublicInstance>()

没有报错，但是在调用方法时会报错

	// error
	// 提示没有这个方法
	inputRef.value.validateInput()

,然后我又尝试写作

	const inputRef = ref<typeof ValidateInput | null>(null)

这样写也不会报错，但是更诡异的是

	// ts不会提示有这个方法
	// 但是这么写的话 不会报错
	// 很奇怪
	(inputRef.value as typeof ValidateInput).validateInput()

写回答

1回答

张轩

2020-10-24

已采纳

同学你好观察ComponentPublicInstance类型定义，你会看到如下代码：

export declare type ComponentPublicInstance<P = {}, // props type extracted from props option
B = {}, // raw bindings returned from setup()
D = {}, // return from data()

也就是说这个类型，有很多泛型我们需要自己构造进去的，简单来看，第一个是 props，第二个是 setup 的返回，之后还有很多就不详细说了，所以说，假如你要定义一个实例，可以这样写。

interface TestProps {
    'message': string;
}
interface TestSetupReturn {
    'validate': () => boolean;
}
const a: ComponentPublicInstance<TestProps, TestSetupReturn>

//现在就可以调用 validate 啦
a.validate()
// 而且 message 可以通过
a.message 和 a.$props.message 访问到

慕莱坞0998854

老师，我以为Vue会出一个内置的工具来方便我们表示这种实例类型呢。比如之前定义prop时使用的PropType.按照您的写法，那岂不是又要再写一次实例有哪些属性和方法...可惜我在网上没有搜索到相关的解决方案。。

2020-10-24

共2条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

ts导入到vue文件，数据类型改变了，是什么原因导致的

回答 1

老师关于自己写复用性组件的问题