属性 'calendar' 在类型 'typeof client' 上不存在

Question

我正在尝试将我的 Google Calender 连接到我的 React 网站。我有一个名为 Calendar 的组件。我使用了 JS tutorial from Google 并将其更改为在 Typescript 中工作。我已经获得身份验证和授权，但无法从日历中获取数据。 compiling/editing.

时出现以下错误

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

我已经下载了 gapi.client.calendar 的类型，如下图所示，它们也位于 @types 文件夹中。我有点卡住了，我不知道如何解决这个问题..

这是我的 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;

编辑

执行 console.log(gapi.client) 时，我可以看到客户端包含一个 calendar 对象（见图）。但是为什么我不能用我自己的代码访问它？

Answer 1

我设法解决了自己的问题。执行 console.log(gapi.client) 后，我注意到日历已经存在，所以我尝试了以下 gapi.client['calendar'] 并且它正常工作。我不知道为什么 Typescript 首先不识别 calendar，所以如果有人有想法，请随时发表评论。

Answer 2

尝试以下方法

安装类型 npm i @types/gapi.client.calendar
在index.html

https://apis.google.com/js/api.js

https://apis.google.com/js/platform.js

在tsconfig.app.json
中的types里面添加如下内容
"types": [ "gapi", "gapi.auth2", "gapi.client", "gapi.client.calendar" ]

Answer 3

您必须添加：

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

在 tsconfig.app.js 和 tsconfig.json 中。

属性 'calendar' 在类型 'typeof client' 上不存在

Property 'calendar' does not exist on type 'typeof client'

typescript

google-api-js-client

reactjs