How to get TypeScript to load typings included with a cordova plugin

Question

I use cordova-plugin-camera in my cordova based app written in TypeScript (3.0.1) and I would like to be able to see the typings for that plugin.

So I install the package @types/cordova-plugin-camera using npm. During the installation npm shows WARN deprecated explaining this @types package is not needed, because the typings are already included in the package cordova-plugin-camera. Therefore I remove the package again.

I then start the compilation, but it fails with error TS2339: Property 'camera' does not exist on type 'Navigator'. My understanding is, that this should just work out of the box (at least for @types packages), but it appears TypeScript doesn't know that it should include the typings directly from cordova-plugin-camera. This seems logical, because I have no explicit statement telling it to import 'cordova-plugin-camera', but there is no need since I only use the globally available object, which is loaded by cordova.

How do I get TypeScript to load the typings directly from cordova-plugin-camera?

---

Possible solutions I already tried

---

🚫 import 'cordova-plugin-camera'

Does not work in my case, because the project I work on is quite old and does not support modules. It just generates a single file using outFile and "module": "none".

---

⚠️ Use types attribute in tsconfig.json

Adding

"types": [ 
  "cordova-plugin-camera" 
]

to tsconfig.json works for cordova-plugin-camera, but causes TypeScript to stop loading types for all other packages, so I'd have to add every single package with types to my tsconfig.json.

---

⚠️ Use typeRoots attribute in tsconfig.json

Adding

"typeRoots": [
  "./node_modules/@types",
  "./node_modules/cordova-plugin-camera"
]

to tsconfig.json works for cordova-plugin-camera and the other packages, but causes option errors during the build for each folder in cordova-plugin-camera not containing types:

error TS2688: Cannot find type definition file for '.github'.
error TS2688: Cannot find type definition file for 'appium-tests'.
error TS2688: Cannot find type definition file for 'doc'.
error TS2688: Cannot find type definition file for 'jsdoc2md'.
error TS2688: Cannot find type definition file for 'src'.
error TS2688: Cannot find type definition file for 'tests'.
error TS2688: Cannot find type definition file for 'www'.

Using ./node_modules/cordova-plugin-camera/types instead of ./node_modules/cordova-plugin-camera leads to TypeScript not finding the types and using ./node_modules causes option errors for each package without types.

---

✅ Use /// <reference types="cordova-plugin-camera" />

Adding /// <reference types="cordova-plugin-camera" /> to one of my TypeScript files works for cordova-plugin-camera and all other packages without causing errors. But adding a reference to just any one of the TypeScript files (doesn't matter which one, as long as it is included in the build) doesn't seem right to me.

---

Are there other ways I have not tried yet? What would be the proper way to resolve this?

Dudeen

Answer 1

I believe /// <reference types="cordova-plugin-camera" /> is the correct approach. You can think of it as the analogue of import 'cordova-plugin-camera' for a project that doesn't use modules. In either case, you have to arbitrarily choose one file to hold the directive (or you can put it in more than one file if you like; it makes no difference).

Out of the box, only @types packages are automatically included, so if you use a non-@types package that provides global declarations, I guess you're supposed to use /// <reference types="..."/> or import '...'.

Legacy

Answer 2

My project is in Angular and uses Cordova to package for devices. I would have to import the library in both projects, Angular and Cordova. I didn't find good and clean options, so I gave up on typing and used "declare":

declare var Camera: any
declare var navigator: any

export const getPicture = () => new Promise((resolve, reject) => {
    const options = {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    }
    navigator.camera.getPicture(resolve, reject, options)
})

It works like a charm.

Etesian