我正在嘗試在我的 Vue / Quasar / TypeScript 應用程式中使用新的 Google Identity Services JavaScript SDK 授權某些 Google API。
根據文檔,我已在 index.template.HTML
文件的標頭中加載了 Google 3P 授權 JavaScript 庫,如下所示:
<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')"> </script>
現在在 Vue 元件中我有這個:
<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>
但是我在「google」上收到 TypeScript 錯誤,內容為:Cannot find name 'google'。 ts(2304)
也許是因為我缺少 Google Identity Services JavaScript SDK 的型別?如果是這樣,在哪裡可以找到它們?
或問題可能是別的什麼?
找到正確類型的套件:
npm 我@types/google.accounts
#這將消除錯誤。