Subscribe on changes!

vue3 ts向所有组件实例注入自定义属性之后声明 @vue/runtime-core 模块会导致 vue 方法导出错误

avatar
Dec 29th 2020

Version

3.0.4

Reproduction link

https://codepen.io/autumn-one/pen/dypJKXq?editors=0010

Steps to reproduce

构建工具为 @vue/cli4.5.9

注入自定义属性如下

app.config.globalProperties.api = api; // 向所有组件注入 api 对象

注入之后是不能在组件中使用的,因为 ts 类型的原因,组件实例是没有 api 的声明的,所以需要额外声明

声明

// shims-vue.d.ts 中追加内容
declare module "@vue/runtime-core" {
    import type { ApiConfig } from "@/api";

    interface ComponentCustomProperties {
        api: ApiConfig;
    }
}

报错

添加如上声明之后所有对 vue 的导入语句全部报错

import { inject, ref, reactive, getCurrentInstance, onMounted } from "vue";

报错信息类似如下:TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'getCurrentInstance'.

What is expected?

正常运行

What is actually happening?

ts报错


我搜索了尽可能多的资料去解决这个问题 但是目前所有的代码示例都是上述的写法 所以这可能是新版本的一个 bug

avatar
Dec 29th 2020

Open the issue in English and with a valid reproduction: https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro

avatar
Oct 13th 2021

Version

3.0.4

Reproduction link

https://codepen.io/autumn-one/pen/dypJKXq?editors=0010

Steps to reproduce

构建工具为 @vue/cli4.5.9

注入自定义属性如下

app.config.globalProperties.api = api; // 向所有组件注入 api 对象

注入之后是不能在组件中使用的,因为 ts 类型的原因,组件实例是没有 api 的声明的,所以需要额外声明

声明

// shims-vue.d.ts 中追加内容
declare module "@vue/runtime-core" {
    import type { ApiConfig } from "@/api";

    interface ComponentCustomProperties {
        api: ApiConfig;
    }
}

报错

添加如上声明之后所有对 vue 的导入语句全部报错

import { inject, ref, reactive, getCurrentInstance, onMounted } from "vue";

报错信息类似如下:TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'getCurrentInstance'.

What is expected?

正常运行

What is actually happening?

ts报错

我搜索了尽可能多的资料去解决这个问题 但是目前所有的代码示例都是上述的写法 所以这可能是新版本的一个 bug

请问你解决了吗,我试了几个typescript版本和vue-next版本,发现只有vue@3.1.4版本才能正常导出composition-api的类,其他都会在编辑器中报错

avatar
Jan 13th 2022

As it turns out, upgrading the TS version didn't work image