Estoy tratando de autorizar algunas API de Google usando el nuevo SDK de JavaScript de Google Identity Services en mi aplicación Vue/Quasar/TypeScript.
Según los documentos , cargué la biblioteca JavaScript de autorización de Google 3P en el encabezado de mi archivo index.template.HTML de la siguiente manera:
<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')"> </script>Ahora dentro de un componente Vue tengo esto:
<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> Pero recibo un error de TypeScript en "google" que dice: Cannot find name 'google'. ts(2304)
¿Tal vez es porque me faltan tipos para el SDK de JavaScript de Google Identity Services? Si es así, ¿dónde encontrarlos?
¿O tal vez el problema es otro?
Encontró el paquete de tipo correcto:
npm i @types/google.accounts
Esto elimina el error.