Свойство «календарь» не существует для типа «тип клиента» - PullRequest
0 голосов
/ 26 сентября 2018

Я пытаюсь подключить свой Google Calender к моему веб-сайту React.У меня есть компонент с именем Calendar.Я использовал учебник JS от Google и изменил его для работы с Typescript.У меня уже работает аутентификация и авторизация, однако загрузка данных из календаря не работает.Я получаю следующую ошибку при компиляции / редактировании.

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

Я уже загрузил типы для gapi.client.calendar и, как вы можете видеть на изображении ниже, они также находятся впапка @types.Я немного застрял и не знаю, как я могу решить эту проблему ..

@Types folder

Вот мой код из моего 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;

EDIT

При выполнении console.log(gapi.client) я вижу, что клиент содержит объект calendar (см. Изображение).Но почему я не могу найти его в своем собственном коде?

console.log(gapi.client)

Ответы [ 2 ]

0 голосов
/ 02 июля 2019

Попробуйте следующее

  1. Типы установки npm i @types/gapi.client.calendar

  2. Включить https://apis.google.com/js/api.js & https://apis.google.com/js/platform.js в index.html

  3. Добавьте следующее types в tsconfig.app.json

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

0 голосов
/ 26 сентября 2018

Мне удалось решить мою собственную проблему.После выполнения console.log(gapi.client) я заметил, что календарь уже был там, поэтому я попробовал следующее gapi.client['calendar'], и оно заработало как надо.Я не знаю, почему Typescript не распознает calendar, поэтому, если у кого-то есть идея, не стесняйтесь оставлять комментарии.

...