“typeof client”类型上不存在属性“calendar”

Question

我正在尝试将我的 Google 日历连接到我的 React 网站。我有一个名为Calendar 的组件。我使用了JS tutorial from Google，并将其更改为在 Typescript 中工作。我已经获得了身份验证和授权，但是从日历中获取数据不起作用。编译/编辑时出现以下错误。

[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

你必须添加：

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

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

Answer 2

试试下面的

1. 安装类型npm i @types/gapi.client.calendar

2. 在index.html 中包含https://apis.google.com/js/api.js 和https://apis.google.com/js/platform.js

3. 在typestsconfig.app.json中添加以下内容

   “类型”：[ “加比”， "gapi.auth2", "gapi.client", “gapi.client.calendar” ]

Answer 3

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