Quasar q-file元素的正确TypeScript类型是什么

Question

我有一个带有模板ref的q-file，它看起来像这样：

<q-file
ref="myFile"
v-model="image"
@update:model-value="imageUpdate"
/>

这是裁判(我最好的猜测是给它一个类型(：

const myFile: Ref<HTMLInputElement | undefined> = ref(undefined);

但当我使用这个时，我会得到一个TypeScript错误：

myFile.value.pickFiles();

这就是错误：

Property 'pickFiles' does not exist on type 'HTMLInputElement'.ts(2339)

所以我认为HTMLInputElement是错误的类型。

q-file的正确类型是什么？

如果没有类型，我该如何创建一个？

Answer 1

每个Quasar组件都有自己的实例类型，您可以从'quasar'导入它们。以下是QFile:的示例

import { ref, Ref } from 'vue';
import { QFile } from 'quasar';
const fileRef: Ref<QFile | undefined> = ref();
function pickFiles () {
if (myFile.value) {
myFile.value.pickFiles();
}
}

专业提示：你可以将它与类型断言相结合，使交互变得更简单。当你想进行销毁时，它特别有用。这种简单性的代价很小，即理解定义ref值的上下文，否则，可能会出现运行时错误。

import { ref, Ref } from 'vue';
import { QFile } from 'quasar';
const fileRef = ref() as Ref<QFile>;
function pickFiles () {
fileRef.value.pickFiles();
}

Answer 2

我不确定这是否正确，但我尝试根据以下内容扩展HTMLInputElement类型。

interface QFile extends HTMLInputElement {
pickFiles: () => void;
}
const myFile: Ref<QFile | undefined> = ref(undefined);
if (myFile.value) {
myFile.value.pickFiles();
}

错误已经消失了，但我不确定这是否100%正确。

q-file Quasar文档中pickFiles方法的形状具有此pickFiles ([evt]) => void 0。

我认为这表明它需要一个事件？或者可能是一个事件数组？

不管怎样，我都无法做到这一点，所以我只是从类型中删除了参数。如果你知道正确的方法，请插话。