typescript - Få tilgang til globalt vindusvariabel fra index.html i en Vue-komponent

Hvis jeg har en Stencil.js-komponent som jeg laster inn i Vue-prosjektet mitt på denne måten:

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>

Jeg vil da nå topplinjeinformasjonen i mine Vue-komponenter. Noe 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å her vil jeg at alt jeg har fra topbaren min skal være tilgjengelig i Vue-komponenten min. Som det er nå, hvis jeg åpner Chrome devtools, kan jeg skrive topbar.user og få all informasjon om brukeren, men jeg vil også at denne informasjonen skal være tilgjengelig i alle Vue-komponenter.

Svar #1

Problemet er at TypeScript ikke kjenner til den egenskapen. Du kan løse det på flere måter:

  1. Legg til // @ts-ignore på forrige linje. Dette undertrykker feil på neste linje.
  2. Kast til any: (window as any).topbar
  3. Definer egenskapen i window-grensesnittet:
declare global {
    interface Window { topbar: any; }
}

Relaterte artikler