Types Angular2/Ionic2 gapi.client.Sheet中的Google Sheet API

我编写Angular2/Ionic2应用程序来显示谷歌表单的列表内容。使用Google登录可以正常工作，但gapi.client.sheet没有定义。我应该怎么做来解决它，或者用方法来代替

我安装了

npm install --save @types/gapi
npm install --save @types/gapi.auth2

这是我的

home.html

<ion-content>
  <pre id="content"></pre>
  <button ion-button id="authorize-button" (click)="handleAuthClick()">Authorize</button>
  <button ion-button id="signout-button" (click)="handleSignoutClick()">Sign Out</button>
</ion-content>

授权
退出

这是我的家

import { Component, ViewChild} from '@angular/core';

import { AlertController, App, FabContainer, ItemSliding, List, ModalController, NavController, LoadingController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class TalentsPage {
  @ViewChild('talentList', { read: List }) talentList: List;


  constructor(
    public alertCtrl: AlertController,
    public app: App,
    public loadingCtrl: LoadingController,
    public modalCtrl: ModalController,
    public navCtrl: NavController
  ) {}

  ionViewWillEnter() {
    this.app.setTitle('Talents');
    this.updateList();
    this.handleClientLoad();
  }    

  handleClientLoad() {
    gapi.load('client:auth2', this.initClient);
  }

  initClient() {
    gapi.client.init({discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"], clientId: 'xxxx.apps.googleusercontent.com', scope: "https://www.googleapis.com/auth/spreadsheets.readonly"
    }).then(function () {
    this.listMajors();
    this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });
  }

  updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      this.listMajors();
    } else {
      alert("doesnt sign in");          
    }
  }

  listMajors() {
        gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: 'xxxx',
          range: 'All BP!A1:R16'
        }).then(function(response) {
          var range = response.result;
          if (range.values.length > 0) {
            this.appendPre('Name, Major:');
            for (let i = 0; i < range.values.length; i++) {
              var row = range.values[i];
              // Print columns A and E, which correspond to indices 0 and 4.
              this.appendPre(row[0] + ', ' + row[4]);
            }
          } else {
            this.appendPre('No data found.');
          }
        }, function(response) {
          this.appendPre('Error: ' + response.result.error.message);
        });
    }
  appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }
  handleAuthClick(event) {
    alert("signin");
    gapi.auth2.getAuthInstance().signIn();
    this.listMajors();
  }
  handleSignoutClick(event) {
    alert("signout");
    gapi.auth2.getAuthInstance().signOut();
  }
}

从'@angular/core'导入{Component，ViewChild}；
从“ionic angular”导入{AlertController、App、FabContainer、ItemSlideing、List、ModalController、NavController、LoadingController}；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
出口级人才{
@ViewChild（'talentList'，{read:List}）talentList:List；
建造师(
公共警报Ctrl:AlertController，
公共应用程序：应用程序，
公共加载Ctrl:LoadingController，
公共modalCtrl:ModalController，
公共navCtrl:NavController
) {}
ionViewWillEnter（）{
此.app.setTitle（“人才”）；
this.updateList（）；
this.handleClientLoad（）；
}    
handleClientLoad（）{
load（'client:auth2'，this.initClient）；
}
initClient（）{
gapi.client.init（{discoveryDocs:[”https://sheets.googleapis.com/$discovery/rest？version=v4“]，客户端ID:'xxxx.apps.googleusercontent.com'，作用域：https://www.googleapis.com/auth/spreadsheets.readonly"
}).然后（函数（）{
这个；
this.updateSigninStatus（gapi.auth2.getAuthInstance（）.isSignedIn.get（））；
});
}
updateSigninStatus（isSignedIn）{
如果（伊西涅丁）{
这个；
}否则{
警报（“未登录”）；
}
}
列表主修科目（）{
gapi.client.sheets.spreadsheets.values.get({
电子表格ID:'xxxx'，
范围：“所有BP！A1:R16”
}).然后（功能（响应）{
var范围=响应。结果；
如果（range.values.length>0）{
此.appendPre（'姓名，少校：'）；
for（设i=0；i

我需要把这个放在我的.ts文件中

declare var gapi: any;