TypeScript + vue3.0设置全局对象或者属性,出现ts类型错误.

努力再努力奋斗再奋斗

已于 2022-03-10 16:17:27 修改

阅读量2.7k

点赞数

分类专栏： Vue与Typescript的结合问题汇总文章标签： typescript javascript 前端

于 2022-03-10 16:14:35 首次发布

本文链接：https://blog.csdn.net/zlguaizhang/article/details/123404276

版权

1 篇文章 0 订阅

订阅专栏

需求:封装接口,将服务器接口的配置都放在了src/api文件下,在src/main.js中添加全局api方便所有的组件都能访问到api。

问题:在/src/main.js中设置了全局属性 app.config.globalProperties.$api = api，但是报了ts类型必传的错误

参考链接:https://v3.cn.vuejs.org/guide/typescript-support.html#%E4%B8%BA-globalproperties-%E6%89%A9%E5%85%85%E7%B1%BB%E5%9E%8B

解决办法:

src/types/api.d.ts。若没有types文件夹则可以创建

import api from '@/api'
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $api: typeof api
  }
}

使用：例如在src/views/LoginPage.vue中使用api

import { getCurrentInstance } from "vue";
const app = getCurrentInstance();
// 通过app?.proxy?.$api就可以访问的到全局添加的api

关注