typescript - Hur man använder Google API Client Library för JavaScript (gapi) med async/await?

Jag har en Vue 3/Quasar/TypeScript-app som använder Google API Client Library för JavaScript (även känd som gapi).

Alla de officiella kodexemplen använder en invecklad röra av callbacks. Istället vill jag implementera det med async/await.

Jag hittade den här handledningen som har gett mig en försprång. Men jag kämpar med att genomföra den.

Enligt handledningen satte jag detta i <head> på min index.template.html:

<!DOCTYPE html>
<html>
  <head>
    <script
      async
      defer
      src="https://apis.google.com/js/api.js"
      onload="window.gapiLoaded()"
      onerror="window.gapiLoadError(event)"
    ></script>
  </head>
  <body>
    <div id="q-app"></div>
  </body>
</html>

Jag kombinerar sedan andra delar av handledningen i min egen loadGooglePeopleApi-funktion. Denna placeras i en Vue-composable och anropas inom en single file-komponent (SFC):

export const loadGooglePeopleApi = async (accessToken: string) => {
  // Wait for the defered gapi script tag to finish loading
  await new Promise((res, rej) => {
    window.gapiLoaded = res;
    window.gapiLoadError = rej;
  });
  // Load Google API Client Library (aka gapi)
  await new Promise((res, rej) => {
    gapi.load('client', { callback: res, onerror: rej });
  });
  // Load an interface for the Google People API
  await gapi.client.load('https://people.googleapis.com/$discovery/rest');
  // Set the access_token
  gapi.client.setToken({ access_token: accessToken });
};

Tyvärr producerar det några TypeScript-fel eftersom dessa typer inte finns på window:

Property 'gapiLoaded' does not exist on type 'Window & typeof globalThis'. ts(2339)
Property 'gapiLoadError' does not exist on type 'Window & typeof globalThis'. ts(2339)

Så jag lade till typerna så här:

declare global {
  interface Window {
    gapiLoaded?: (value: unknown) => void;
    gapiLoadError?: (reason?: any) => void;
  }
}

Men nu får jag detta fel i konsolen varje gång sidan laddas:

Uncaught TypeError: window.gapiLoaded is not a function

Implementerar jag detta korrekt? Varför får jag felmeddelandet i konsolen?

Relaterade artiklar