typescript - 从 Vue 组件中的 index.html 获取全局窗口变量

Question

如果我有一个 Stencil.js 组件，我像这样加载到我的 Vue 项目中:

index.html:

  <script type="module"
    src="https://xxxxxx.s3-eu-west-1.amazonaws.com/topbar.esm.js">
  </script>

  <script>
    window.addEventListener('topbarLoaded', function (data) {
      window.topbar = data.detail;
      console.log('topbar was loaded and here it is:', window.topbar);
    });
  </script>

然后我想访问我的 vue 组件中的顶栏信息。 类似的东西

VueComponent.vue

<script lang="ts">
   import { Component, Prop, Vue } from "vue-property-decorator";

   @Component({
     name: 'testcomp'
   })
   export default class PodList extends Vue {
      data() {
         return {
            topbar: window.topbar // Error: Property 'topbar' does not exist on type 'Window & typeof globalThis'
         }
      }
   }
</script>

所以在这里我希望我的顶部栏中的所有内容都可以在我的 Vue 组件中访问。 现在，如果我打开 Chrome devtools，我可以编写 topbar.user 并获取用户的所有信息，但我也希望所有 vue 组件都可以访问这些信息。

Answer 1

问题是 TypeScript 不知道该属性。您可以通过多种方式解决这个问题:

1. 在上一行添加//@ts-ignore。这会抑制下一行的错误。
2. 转换为任意:(窗口为任意).topbar
3. Define the property在window界面中:

declare global {
    interface Window { topbar: any; }
}