ts 与 vue3 globalProperties和 window对象

4,586 阅读1分钟

globalProperties扩展

// 以api为例
// 文件路径 /plugins/index.js
import Api from "../api/index"; // 为需要挂载到vue上的函数
 
export default {
  install: (app: any) => {
    app.config.globalProperties.$Api = Api;
  }
};
// 文件路径 main.js
const app = createApp(App);
// 通过use即挂载成功
app.use(api);
 
app
  .use(store)
  .use(router)
  .mount("#app");
// 文件路径 shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
 
// 对vue进行类型补充说明
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $Api: any // 这里可以用$Api具体的类型代替any
  }
}

window对象扩展

declare global {
  interface Window {
    _czc: any
  }
}

如果上面的不行,则改成下面这种

interface Window {
  _czc: any
}