Vue + TypeScript prop 类型错误：“'Foo' 仅指类型，但在这里被用作值。”

Question

我对 TypeScript 和 Vue Composition API 比较陌生，我发现以下错误令人困惑：

我有一个组件，它接受一个变量作为 prop，api该变量应该是AxiosInstance：

export default defineComponent({
  props: {
    api: AxiosInstance,
(...)

但是当我尝试将typeprop 的 设置为 时AxiosInstance，出现以下错误：

TS2693：“AxiosInstance”仅指类型，但在这里用作值。

这让我感到困惑，因为我的印象是我使用类型作为这种 prop 对象中的值。例如，我有另一个 prop 定义如下：

    fileExtensionFilter: {
      type: String,
      default: undefined
    },

如何正确定义这个api道具的类型？

Answer 1

我从同事那里得到了解决方案：

使用时defineComponent()，需要使用 Vue 的helper，这里的PropType文档中有描述。

所以代码应该是这样的：

import {PropType} from 'vue'
export default defineComponent({
  props: {
    api: Object as PropType<AxiosInstance>,
(...)