Bagaimanakah penggunaan Vue/TypeScript berfungsi dengan SDK JavaScript Perkhidmatan Pengesahan Google?

Question

Saya cuba membenarkan beberapa API Google menggunakan SDK JavaScript Perkhidmatan Identiti Google baharu dalam apl Vue / Quasar / TypeScript saya.

Menurut dokumentasi, saya telah memuatkan perpustakaan JavaScript Kebenaran Google 3P dalam pengepala fail index.template.HTML seperti ini:

<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')">  
</script>

Kini dalam komponen Vue saya mempunyai ini:

<template>
  <v-btn
    class="q-ma-md"
    design="alpha"
    label="Connect Google Calendar"
    @click="handleGoogleCalendarConnect"
  />
</template>

<script setup lang="ts">
import VBtn from 'src/components/VBtn.vue';

const client = google.accounts.oauth2.initCodeClient({ // <-- TypeScript Error Here
  client_id:
    'MY_CLIENT_API_KEY_GOES_HERE',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response: any) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function () {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + code);
  },
});

const handleGoogleCalendarConnect = () => {
  client.requestCode();
};
</script>

Tetapi saya mendapat ralat TypeScript pada "google" yang berbunyi: Cannot find name 'google'。 ts(2304)

Mungkin kerana saya kehilangan jenis daripada SDK JavaScript Perkhidmatan Identiti Google? Jika ya, di manakah saya boleh mencari mereka?

Atau mungkin masalahnya adalah sesuatu yang lain?

Answer 1

Cari jenis beg yang sesuai:

npm 我@types/google.accounts

Ini akan menghapuskan ralat.