FileSystem in Typescript

Question

How can I use FileSystem API in TypeScript in an Angular 4 application?

I added @types/filesystem to devDependencies, but I still get compile errors like

Property 'resolveLocalFileSystemURL' does not exist on type 'Window'.

Cannot find name 'FileError'.

Cannot find name 'FileEntry'.

My tsconfig.json is almost the same as the one generated by angular-cli, I just added "node_modules/typed-cordova-plugin-purchase to typeRoots:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
            "node_modules/typed-cordova-plugin-purchase"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

Should I import anything? Are there any examples of using FileSystem in Typescript?

Answer 1

I made it finally work by adding types to tsconfig.json, actually tsconfig.app.json (I'm using angular CLI 1.0.1)

"types": [
    "cordova",
    "cordova-plugin-file"
]

Using @types/filesystem is not enough as FileError is not defined there, that's why I used "@types/cordova-plugin-file.

Answer 2

As an addition to the previous answer, be sure to add @types/cordova (and possibly @types/cordova-plugin-file... see note below) to your project if you have not done so already. That was my situation compiling an angular 5 based app to an alternate cordova-based target.

npm install @types/cordova --save
npm install @types/cordova-plugin-file --save

(the latter plugin states: This is a stub types definition for Apache Cordova File System plugin. Apache Cordova File System plugin provides its own type definitions, so you don't need @types/cordova-plugin-file installed!)