[英]Property 'calendar' does not exist on type 'typeof client'
I'm trying to connect my Google Calender to my React website.我正在尝试将我的 Google 日历连接到我的 React 网站。 I've got a component called Calendar
.我有一个名为Calendar
的组件。 I've used the JS tutorial from Google and I've changed it to work in Typescript.我使用了Google的JS 教程,并将其更改为在 Typescript 中工作。 I've got the authentication and authorization already working, however fetching data from the calendar is not working.我已经获得了身份验证和授权,但是从日历中获取数据不起作用。 I'm getting the following error when compiling/editing.编译/编辑时出现以下错误。
[ts] Property 'calendar' does not exist on type 'typeof client'. Did you mean 'calendars'?
I've already downloaded the types for the gapi.client.calendar and as you can see in the image below, they are also found in the @types
folder.我已经下载了 gapi.client.calendar 的类型,如下图所示,它们也可以在@types
文件夹中找到。 I'm kind of stuck and I don't know how I can fix this issue..我有点卡住了,我不知道如何解决这个问题..
Here is my code from my Calendar.tsx这是我的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编辑
When performing console.log(gapi.client)
I can see that the client contains a calendar
object (see image).执行console.log(gapi.client)
我可以看到客户端包含一个calendar
对象(见图)。 But why can't I reach it in my own code?但是为什么我不能在我自己的代码中达到它?
I managed to fix my own problem.我设法解决了我自己的问题。 After performing console.log(gapi.client)
I noticed that calender was already there, so I tried the following gapi.client['calendar']
and it worked as it should.执行console.log(gapi.client)
我注意到日历已经存在,所以我尝试了以下gapi.client['calendar']
并且它正常工作。 I don't know why Typescript does not recognize the calendar
in the first place, so if anybody has an idea feel free to leave a comment.我不知道为什么 Typescript 首先不识别calendar
,所以如果有人有想法,请随时发表评论。
Try the following尝试以下
Install types npm i @types/gapi.client.calendar
安装类型npm i @types/gapi.client.calendar
Include https://apis.google.com/js/api.js
& https://apis.google.com/js/platform.js
in index.html
在index.html
包含https://apis.google.com/js/api.js
& https://apis.google.com/js/platform.js
Add the following inside types
in tsconfig.app.json
在tsconfig.app.json
添加以下内部types
"types": [ "gapi", "gapi.auth2", "gapi.client", "gapi.client.calendar" ] “类型”:[“gapi”,“gapi.auth2”,“gapi.client”,“gapi.client.calendar”]
You have to add:你必须添加:
"types": ["gapi", "gapi.auth2", "gapi.client", "gapi.client.calendar"]
in tsconfig.app.js and in tsconfig.json.在 tsconfig.app.js 和 tsconfig.json 中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.