reactjs - Egenskapen 'calendar' existerar inte på typen 'typeof client'

Jag försöker ansluta min Google Kalender till min React-webbplats. Jag har en komponent som heter Calendar. Jag har använt JS-handledningen från Google och jag har ändrat den för att fungera i Typescript. Jag har redan fått autentisering och auktorisering att fungera, men att hämta data från kalendern fungerar inte. Jag får följande fel när jag kompilerar/redigerar.

[ts] Property 'calendar' does not exist on type 'typeof client'. Did you mean 'calendars'?

Jag har redan laddat ner typerna för gapi.client.calendar och som du kan se i bilden nedan finns de också i @types-mappen. Jag är lite fast och jag vet inte hur jag kan lösa det här problemet..

Här är min kod från min Calendar.tsx

import * as React from 'react';
import { Button } from 'semantic-ui-react'
import googleApiKey from '../googleapi-key.json';

const CLIENT_ID = googleApiKey.CLIENT_ID;
const API_KEY = googleApiKey.API_KEY;
const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
const SCOPES = "https://www.googleapis.com/auth/calendar.readonly";


class Calendar extends React.Component {
    constructor(props: any) {
        super(props);

        console.log(CLIENT_ID);
        console.log(API_KEY);

        this.handleClientLoad = this.handleClientLoad.bind(this);
        this.handleAuthClick = this.handleAuthClick.bind(this);
        this.handleSignoutClick = this.handleSignoutClick.bind(this);
        this.initClient = this.initClient.bind(this);
        this.updateSigninStatus = this.updateSigninStatus.bind(this);
        this.listUpcomingEvents = this.listUpcomingEvents.bind(this);
    }

    componentDidMount() {
        this.initClient();
    }


    public render() {
        return (
            <div>
                <Button onClick={this.handleAuthClick}>
                    authorizeButton
                </Button>

                <Button onClick={this.handleSignoutClick}>
                    signoutButton
                </Button>
            </div>
        );
    }

    /**
     *  On load, called to load the auth2 library and API client library.
     */
    public handleClientLoad() {
        gapi.load('client:auth2', this.initClient);
    }

    /**
 *  Sign in the user upon button click.
 */
    public handleAuthClick(event: any) {
        gapi.auth2.getAuthInstance().signIn();
    }

    /**
     *  Sign out the user upon button click.
     */
    public handleSignoutClick(event: any) {
        gapi.auth2.getAuthInstance().signOut();
    }

    /**
     *  Initializes the API client library and sets up sign-in state
     *  listeners.
     */
    public async initClient() {
        await gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
        })

        // Listen for sign-in state changes.
        gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

        // Handle the initial sign-in state.
        this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());

    }

    /**
     *  Called when the signed in status changes, to update the UI
     *  appropriately. After a sign-in, the API is called.
     */
    public updateSigninStatus(isSignedIn: any) {
        if (isSignedIn) {
            this.listUpcomingEvents();
        }
    }

    /**
     * Print the summary and start datetime/date of the next ten events in
     * the authorized user's calendar. If no events are found an
     * appropriate message is printed.
     */
    public listUpcomingEvents() {
        console.log(gapi.client.calendar); // <--- Compile error: Does not recognize calendar
    }
}

export default Calendar;

REDIGERA

När jag använder console.log(gapi.client) kan jag se att klienten innehåller ett calendar-objekt (se bilden). Men varför kan jag inte nå det i min egen kod?

Svar #1

Jag lyckades fixa mitt eget problem. Efter att ha kört console.log(gapi.client) märkte jag att kalender redan fanns där, så jag testade följande gapi.client['calendar'] och det fungerade som det skulle. Jag vet inte varför Typescript inte känner igen calendar från början, så om någon har en idé är ni välkomna att lämna en kommentar.

Svar #2

Prova följande

1. Installera typer npm i @types/gapi.client.calendar

2. Inkludera https://apis.google.com/js/api.js & https://apis.google.com/js/platform.js i index.html

3. Lägg till följande inom types i tsconfig.app.json

   "typer": [ "gapi", "gapi.auth2", "gapi.client", "gapi.client.calendar" ]