How to use requestFileSystemSync API in angular worker?

Issue

In regular JavaScript worker, I can use requestFileSystemSync filesystem API as below.

    self.requestFileSystemSync = self.webkitRequestFileSystemSync || self.requestFileSystemSync;
     var fs = requestFileSystemSync(PERSISTENT, 1024);

How to use this in angular worker(.ts) file?

Appreciate your help.

Solution

Angular workers are acutally the usual (web)workers, but you need to write them in typescript. Your problem is just due to the compilation of the typescript file.

Since FileSystemSync API (MDN) is experimental and deprecated it leak of typings declarations. This means that the TS compiler does not know that they are present in your environment (chrome/chromium/webkit browser) and also does not know how it works.

For this you need to instruct the compiler and declare what you have already in your browser:

// constant declarations
declare const TEMPORARY: 0;
declare const PERSISTENT: 1;

// this is the object returned by requestFileSystemSync
interface FileSystemSync {
  readonly name: string,
  readonly root: FileSystemDirectoryEntry
}

// we tell to the compiler to add these two
// properties to the type definition
// of the global window object
//
// NOTE: self is a variable of type (Window & typeof globalThis)
//       and we extend the Window interface with the following
interface Window {
  requestFileSystemSync: (type: 0 | 1, size: number) => FileSystemSync;
  webkitRequestFileSystemSync?: (type: 0 | 1, size: number) => FileSystemSync;
}

// polyfill assignment
self.requestFileSystemSync = self.webkitRequestFileSystemSync ||
                             self.requestFileSystemSync;

// usage
var fs: FileSystemSync = self.requestFileSystemSync(PERSISTENT, 1024);

Another way to deal with undeclared variables (that one which was stated in my comment) is to assume that the self global object is of any type such that the compiler will not complain how we manage it. This way is usually to be avoided, because anyone can misspell or use wrongly, with the subsequently difficulty to debug runtime errors:

(self as any).requestFileSystemSync = (self as any).webkitRequestFileSystemSync ||
                                      (self as any).requestFileSystemSync;

// NOTE: PERSISTENT is not declared so use 1, the actual value
var fs = (self as any).requestFileSystemSync(1, 1024);
// OR you can access the global object again:
var fs = (self as any).requestFileSystemSync((self as any).PERSISTENT, 1024);

// Another way is to declare new constants
const TEMPORARY: 0 = 0;
const TEMPORARY: 0 = (self as any).TEMPORARY;
const PERSISTENT: 1 = 1;
const PERSISTENT: 1 = (self as any).PERSISTENT;

// Another way is to use the angle brackets:
(<any>self).requestFileSystemSync = (<any>self).webkitRequestFileSystemSync ||
                                    (<any>self).requestFileSystemSync;
var fs = (<any>self).requestFileSystemSync(PERSISTENT, 1024);

Answered By - DDomen