Vue+TypeScript中AxiosInstance类型Prop定义报错如何解决？

错误原因 #

你遇到的TS2693错误，核心是Vue的props配置里type字段要求的是运行时存在的构造函数（比如String、Object这类内置构造函数），而AxiosInstance是TypeScript专属的类型别名，仅存在于编译阶段，并非运行时可访问的值，直接把它当作值使用自然会报错。

对比你之前写的fileExtensionFilter：String既是TypeScript的类型，也是JavaScript的内置构造函数（运行时存在），所以可以直接用于type字段。

解决方案 #

根据你使用的组件写法，有两种正确的定义方式：

1. 选项式API（defineComponent）写法

从Vue导入PropType，用它来断言AxiosInstance类型，同时确保已从axios中导入该类型：

import { defineComponent, PropType } from 'vue';
import type { AxiosInstance } from 'axios';

export default defineComponent({
  props: {
    api: {
      // 用PropType桥接TS类型和Vue运行时的prop验证
      type: Object as PropType<AxiosInstance>,
      required: true // 根据业务需求设置是否必填
    },
    fileExtensionFilter: {
      type: String,
      default: undefined
    }
  },
  // 组件其他逻辑...
});

这里用Object作为运行时的验证类型（因为AxiosInstance本质是对象），再通过PropType<AxiosInstance>告诉TypeScript这个prop的具体类型。

2. <script setup>语法糖（组合式API推荐写法）

使用defineProps的泛型参数直接定义类型，无需处理运行时的type字段：

<script setup lang="ts">
import type { AxiosInstance } from 'axios';

const props = defineProps<{
  api: AxiosInstance;
  fileExtensionFilter?: string;
}>();
</script>

这种写法更简洁，TypeScript能直接识别prop类型，Vue会自动推断运行时的验证规则。

内容的提问来源于stack exchange，提问作者Nathan Wailes