How to use typings to install cordova from github DefinitelyTyped?


#1

Hi, I have the same issue as described in this post Ionic2 typescript project with cordova plugins. So far, I prefer to use typings to install the d.ts files for cordova. However, I met the following issues:

1). When using the following command, it adds the following kev/value to the typings.json file.

// command line
$ typings install cordova --ambient --save

// typings.json file
"cordova": "registry:dt/cordova#0.0.0+20151102150547"

However, when I look into /typings/main/ambient/cordova/index.d.ts, it is different from the one in DefinitelyTyped.

2). The default es6-shim in typings.json does come from DefinitelyTyped, as

"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c"

If I want to reference cordova from DefinitlelyTyped, what should I do? And why there is a uuid #4de74cb527395c13ba20b438c3a7a419ad931f1c after the es6-shim reference? can I just do:

"cordova": "github:DefinitelyTyped/DefinitelyTyped/cordova/cordova.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c"

#2

Hi,
the hash at the end is a reference to a specific commit.

I don’t know why there is this uri in the typings.json, I have the same. However, for me cordova is available inside my typescript source code. Also support for intellisense inside visual code.


#3

@stefanhuber, ah, yes, the hash references to the commit. It’s helpful if I want to change to other commits.

Finally, I found a solution to get the StatusBar resovled by TypeScript. Just install cordova is not enough, I have to install the corresponding plugins as well.

$ typings install cordova --ambient --save
$ typings install cordova/plugins/statusbar --ambient --save

It will add the followings to the typings.json

{
  "ambientDependencies": {
    "cordova": "registry:dt/cordova#0.0.0+20160316155526",
    "cordova/plugins/statusbar": "registry:dt/cordova/plugins/statusbar#0.0.0+20160316155526"
  }
}

And another interesting thing I found is that, they do link to the DefinitelyTyped repo. I was fooled by the strange registry:dt/cordova#0.0.0+20160316155526.

If I type https://api.typings.org/entries/dt/cordova%2Fplugins%2Fstatusbar/versions/latest into the browser, I will get the following json. And the location property points to the DefinitelyTyped.

{
  "tag":"0.0.0+20160316155526",
  "version":"0.0.0",
  "description":null,
  "compiler":null,
  "location":"github:DefinitelyTyped/DefinitelyTyped/cordova/plugins/StatusBar.d.ts#56295f5058cac7ae458540423c50ac2dcf9fc711",
  "updated":"2016-03-16T15:55:26.000Z",
  "deprecated":null}

Now, I can use the StatusBar to modify its styles for iOS. :slight_smile: And I am using Visual Code too.


Cordova plugin - network interface issue
Ionic typescript project with cordova plugins
#4

Hi, I followed your method but I still get an error on ionic cli with the camera plugin:

ERROR in [default] /app/pages/page2/page2.ts:16:27
Property ‘DestinationType’ does not exist on type ‘typeof Camera’.

ERROR in [default] /app/pages/page2/page2.ts:17:22
Property ‘PictureSourceType’ does not exist on type ‘typeof Camera’.

ERROR in [default] /app/pages/page2/page2.ts:19:24
Property ‘EncodingType’ does not exist on type ‘typeof Camera’.

ERROR in [default] typings/browser/ambient/ng-cordova/camera/index.d.ts:11:45
Cannot find namespace ‘ng’.

I’ve added the camera plugin

$ typings install cordova --ambient --save
$ typings install cordova/plugins/camera --ambient --save

typings.json:

{
  "ambientDependencies": {
    "cordova": "registry:dt/cordova#0.0.0+20160316155526",
    "cordova/plugins/camera": "registry:dt/cordova/plugins/camera#0.0.0+20160316155526"
  }
}

Is there something that I missed?


#5

I’ve done the installing similar to you however haven’t tried an ionic serve yet because in Visual Code intellisense is saying that ‘property getPicture’ is not a type on Camera:

let options = {
            quality: 100,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit: false,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 350,
            targetHeight: 350,
            correctOrientation: true,
            saveToPhotoAlbum: false
        }

        Camera.getPicture(options).then...

(though it doesn’t complain about the properties of Camera defined in my options).

Looking at the index.d.ts for the camera plugin shows it’s only picking up the following properties:

declare var Camera: {
    // Camera constants, defined in Camera plugin
    DestinationType: {
        DATA_URL: number;
        FILE_URI: number;
        NATIVE_URI: number
    }
    Direction: {
        BACK: number;
        FRONT: number;
    }
    EncodingType: {
        JPEG: number;
        PNG: number;
    }
    MediaType: {
        PICTURE: number;
        VIDEO: number;
        ALLMEDIA: number;
    }
    PictureSourceType: {
        PHOTOLIBRARY: number;
        CAMERA: number;
        SAVEDPHOTOALBUM: number;
    }
    // Used only on iOS
    PopoverArrowDirection: {
        ARROW_UP: number;
        ARROW_DOWN: number;
        ARROW_LEFT: number;
        ARROW_RIGHT: number;
        ARROW_ANY: number;
    }

How do I instead get my code to ‘see’ the property of the Camera interface as also defined in index.d.ts?

interface Camera {
    /**
     * Removes intermediate photos taken by the camera from temporary storage.
     * @param onSuccess Success callback, that called when cleanup succeeds.
     * @param onError Error callback, that get an error message.
     */
    cleanup(
        onSuccess: () => void,
        onError: (message: string) => void): void;
    /**
     * Takes a photo using the camera, or retrieves a photo from the device's image gallery.
     * @param cameraSuccess Success callback, that get the image
     * as a base64-encoded String, or as the URI for the image file.
     * @param cameraError Error callback, that get an error message.
     * @param cameraOptions Optional parameters to customize the camera settings.
     */
    getPicture(
        cameraSuccess: (data: string) => void,
        cameraError: (message: string) => void,
        cameraOptions?: CameraOptions): void;
    // Next will work only on iOS
    //getPicture(
    //    cameraSuccess: (data: string) => void,
    //    cameraError: (message: string) => void,
    //    cameraOptions?: CameraOptions): CameraPopoverHandle;
}

The ‘documentation’ says I should be able to just use Camera.getPicture:

http://ionicframework.com/docs/v2/native/Camera/

I have not used anyimport call at the start of my page as I am not sure it’s necessary (docs don’t say so).

Thanks to anyone who can advise!

UPDATE: I found that I needed to install ionic-native as advised here:

and then import using

import {Camera} from 'ionic-native';

for Camera.getPicture to be recognised by the intellisense. Unfortunately now the Camera properties defined in my options such as DestinationType are not being recognised by the intellisense (I’ve inverted my problem!). I’ll update again if I get that sorted. Argh, can’t wait for some thorough documentation!

UPDATE 2: In node_modules -> ionic-native -> dist -> plugins -> camera.d.ts it shows that the properties destinationType, sourceType and encodingType are expecting numbers. Thus, as per the comments in that file, for my situation I needed to specify:

let options = {
            quality: 100,
            destinationType: 0,
            sourceType: 1,  
            allowEdit: false,
            encodingType: 0,
            targetWidth: 350,
            targetHeight: 350,
            correctOrientation: true,
            saveToPhotoAlbum: false
        }

#6

Dear all,

by adding the typings of the cordova plugins the api is available as stated in the documentation of the plugin. e.g. the camera plugin is attached to the navigator object.

So, without installing ionic-nativ (which is JUST a wrapper) in order to use the camera try: navigator.camera.getPicture(...)


#7

Hi @stefanhuber,

You’re right, navigator.camera.getPicture(...) would be sufficient for now. My options look something like this though just to avoid the typescript warning:

let options = {
    	quality: 100,
    	destinationType: navigator.camera.DestinationType.FILE_URI,
    	sourceType: navigator.camera.PictureSourceType.CAMERA,
    	allowEdit: true,
    	encodingType: navigator.camera.EncodingType.JPEG,
    	targetWidth: 100,
    	targetHeight: 100,
    	saveToPhotoAlbum: false,
    	correctOrientation:true
    };

#8

I got the ionic native plugin to work with the following steps.

  • install plugin with => ionic plugin add cordova-plugin-camera
  • install ionic-native if not present already (node-module) => npm install ionic-native while in the root of your app.
  • import {Camera} from 'ionic-native'; in your .ts file
  • Use following code to open camera (on emulator/device, cordova is not available with ionic serve)
 var options = {
            destinationType: 1,
            sourceType: 1,
            encodingType: 0,
            quality:100,
            allowEdit: false,
            saveToPhotoAlbum: true,            
            correctOrientation: true,
            targetWidth:1000,
            targetHeight: 800
        };   
 
        Camera.getPicture(options).then((imgPath) => {
            return imgPath;
        }, (err) => {                
            if(err.error == "cordova_not_available") {
                return "my-fake-path";           
            } else {
                alert("Failed to open camera: " + err.error);                
            }    
        });

#9

Need some help. I am trying to use network interface plugin https://github.com/salbahra/cordova-plugin-networkinterface

While using the plugin function networkinterface.getipaddress I get an error [ts] Cannot find name 'networkinterface' any

If i try using typings install cordova/plugins/networkinterface --ambient --save. I get an error that it can’t find the plugin.

Although If I run my app I get the desired result but if I use any global variable/ function inside this
networkinterface.getIPAddress(function (ip) { alert(ip); this.testip(ip); });
I get an error TypeError: Cannot read property 'testip' of null (testip being a function)

How to solve this? I was to use the id address for some calculations and in some other function also.


#10

The syntax have changed in the meantime, for me this worked when installing plugin related definitions:
typings install dt~cordova-plugin-statusbar --global