Typescript Error Cannot find name 'gapi'

Ionic Framework ionic-v3
1

I trying to implement google short api in my ionic app. So, I wrote the following code:

home.ts

export class HomePage {
	longurl:any;
	url:string ="http://socu.tk/";
	
	
	makeShort(){
	  console.log(this.longurl);
	  var request = gapi.client.urlshortener.url.insert({
		'resource': {
        'longUrl': this.longurl
	    }}); 
	}
...

and in home.html

 <ion-item>
	<ion-label floating>EX. http://loooong.url</ion-label>
	<ion-input type="text" [(ngModel)]="longurl"></ion-input>
</ion-item>

in index.html

 <script async src="https://apis.google.com/js/client.js"> </script>
 <script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

But it shows me an error which is:

Typescript Error
Cannot find name ‘gapi’

What’s the solution !? :frowning:

2

First of all, I think you shouldn’t use jQuery in an Angular application, since it won’t make your code any nicer and there’s nothing Angular can’t do that jQuery can. If you do think that’s the case or if you think it’s convenient to use, please try some Angular2 tutorials :slight_smile: (loading jquery like this also makes your app slower and dependant).

Secondly for scoping reasons I would never use var but let instead. Then the last one: cannot find name gapi is very logical, since it isn’t a known type. As says the description typescript error. It means you must somehow let the typescript compiler know you’re using an unknown type. You could add this in your declarations.d.ts or in your component:

declare var gapi any

Or even better, google if there’s a gapi typescript package which you can install for the missing typings.

3

anyway if you need take a look in web project :
https://github.com/el3zahaby/URLShort

this project work very well