Add documentation on how to use this plugin with TypeScript

[kputh]

Feature Request

Motivation Behind Feature

I'm migrating an exiting project to Cordova, and this plugin has been challenging. The project uses TypeScript and figuring out how to use the types in the package properly has been a hassle.

(I don't use 'global' libraries very often. My current solution is simply import 'cordova-plugin-file'; It does fail at constants like cordova.file.dataDirectory.)

Feature Description

A paragraph in the documentation about using this plugin with TypeScript and a complete TypeScript module (file) using it as an example would be nice.

Alternatives or Workarounds

none

[breautek]

Related: https://github.com/apache/cordova/issues/39

[breautek]

Currently a workaround would be to create your own definition file that you can include in the project, which would declare the variables and functions added by the cordova-plugin-file, which for the time being, just to satisfy typescript, the declares types could be defined as any. An example of extending global (or in this case, the window) can be found on the typescript docs.

[timbru31]

How did you add the files to your tsconfig?

[breautek]

How did you add the files to your tsconfig?

In my projects where i need to write my own type definitions cause a third party doesn't supply them, I don't think I do... instead I believe I use the triple slash directive to reference the d.ts file.

[kputh]

Update: I replaced the import with /// <reference types="cordova-plugin-file" />. The static code analysis was satisfied with the import, but the compiler complained that the definition file is not a module.

How did you add the files to your tsconfig?

My tsconfig.json look roughly like this:

{
  "files": [ "src/entry-point.ts" ],
  "include": [ "types/**/*.d.ts" ],
  "exclude": [ "src/**/*.spec.ts" ]
}

I implicitly use the default typeRoots configuration.

[timbru31]

This one works fine for us:

{
	"extends": "./tsconfig.json",
	"compilerOptions": {
		"outDir": "./out-tsc/app",
		"preserveConstEnums": true,
		"types": ["node", "cordova", "cordova-plugin-file", "cordova-plugin-lottie-splashscreen"]
	},
	"files": ["src/main.ts", "src/polyfills.ts"],
	"include": ["src/**/*.d.ts"]
}

Base tsconfig.json is:

{
	"compileOnSave": false,
	"compilerOptions": {
		"baseUrl": "./",
		"outDir": "./dist/out-tsc",
		"sourceMap": true,
		"declaration": false,
		"module": "esnext",
		"moduleResolution": "node",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"importHelpers": true,
		"noImplicitAny": true,
		"strictNullChecks": false,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"resolveJsonModule": true,
		"allowSyntheticDefaultImports": true,
		"allowUnreachableCode": false,
		"target": "es2015",
		"typeRoots": ["node_modules/@types"],
		"lib": ["es2020", "dom"]
	},
	"angularCompilerOptions": {
		"disableTypeScriptVersionCheck": true,
		"fullTemplateTypeCheck": true,
		"strictInjectionParameters": true
	}
}

Blind guess: You are missing the cordova-plugin-file entry in the types array.

Edit: Oh and no need to call import 'cordova-plugin-file'

[kputh]

Blind guess: You are missing the cordova-plugin-file entry in the types array.

The compiler and static code analysis work with this. But it's definitely something that should be documented.