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

Question

老师在尝试使用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()

Answer 1

张轩 2020-10-24 10:09:57

同学你好 观察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 #1

  非常感谢！

• 提问者 慕莱坞0998854 #2

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