Property ‘proxy‘ does not exist on type ‘ComponentInternalInstance

Property ‘proxy‘ does not exist on type ‘ComponentInternalInstance | null‘.ts

有来技术2023-11-16 14:20

问题

Vue 3 使用 getCurrentInstance 获取当前正在执行的组件实例 TypeScript 报错。

typescript 复制代码

const { proxy } = getCurrentInstance();

报错信息：

typescript 复制代码

Property 'proxy' does not exist on type 'ComponentInternalInstance | null'.ts

解决方案

在Vue 3的Composition API中，getCurrentInstance()返回的类型是ComponentInternalInstance | null。因此，当你使用const { proxy } = getCurrentInstance();时，TypeScript会报错，因为proxy属性在类型定义中并不存在。

为了解决这个问题，你可以使用类型断言（Type Assertion）来告诉TypeScript你确信返回的实例是非空的。在这种情况下，你可以使用非空断言!：

typescript 复制代码

const { proxy } = getCurrentInstance()!;

请注意，使用非空断言表示你确信getCurrentInstance()永远不会返回null。如果你不能确保这一点，最好在代码中进行适当的空值检查。例如：

typescript 复制代码

const instance = getCurrentInstance();

if (instance) {
  const { proxy } = instance;
  // 现在你可以安全地使用 proxy
} else {
  console.error("无法获取组件实例");
}