Quasar q 文件元素的正确 TypeScript 类型是什么？

Question

我有一个带有模板引用的 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

我不确定这是否正确，但我尝试按照以下方式扩展 HTMLInputElement 类型。

interface QFile extends HTMLInputElement {
    pickFiles: () => void;
}

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

if (myFile.value) {
    myFile.value.pickFiles();
}

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

q-file Quasar docs 中 pickFiles 方法的形状有这个 pickFiles ([evt]) => void 0。

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

无论哪种方式，我都无法正常工作，所以我只是从类型中删除了参数。如果您知道正确的做法，请插话。

Answer 2

每个 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();
}

Quasar q 文件元素的正确 TypeScript 类型是什么？

What is the correct TypeScript type for a Quasar q-file element?

typescript

quasar-framework