Question

我正在尝试将Google Calender连接到我的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

我设法解决了自己的问题。执行console.log(gapi.client)后，我注意到压光机已经在那里，因此我尝试了以下gapi.client['calendar']，它应能正常工作。我不知道为什么Typescript首先不能识别calendar，因此，如果有人有想法可以发表评论。

Answer 2

尝试以下

安装类型import re regex = r"^Thanks\s*,\s*([A-Z]?[a-z]*)\s*[^!]?$" test_str = ("Thanks, Bob\n" "Thanks, Bob.\n" "Thanks, Bob!") subst = "Thanks, [NAME]" result = re.sub(regex, subst, test_str, 0, re.MULTILINE) if result: print (result)
在npm i @types/gapi.client.calendar

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

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

在index.html的{{1}}内添加以下内容

“类型”：[ “ gapi”， “ gapi.auth2”， “ gapi.client”， “ gapi.client.calendar” ]

Answer 3

您必须添加：

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

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

类型“客户端类型”

3 个答案: