typescript - Kom åt globalt fönstervariabel från index.html i en Vue-komponent

Om jag har en Stencil.js-komponent som jag laddar in i mitt Vue-projekt så här:

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>

Jag vill sedan nå toppfältets information i mina Vue-komponenter. Något som

VueKomponent.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>

Så här vill jag att allting jag har från min toppbar ska vara tillgängligt i min Vue-komponent. Som det är nu, om jag öppnar Chrome devtools kan jag skriva topbar.user och få all information om användaren, men jag vill också att denna information ska vara åtkomlig i alla Vue-komponenter.

Svar #1

Problemet är att TypeScript inte känner till den egenskapen. Du kan lösa det på flera sätt:

  1. Lägg till // @ts-ignore på föregående rad. Detta undertrycker fel på nästa rad.
  2. Kasta till any: (window as any).topbar
  3. Definiera egenskapen i window-gränssnittet:
declare global {
    interface Window { topbar: any; }
}

Relaterade artiklar