Opting for FileReader.result over event.target.result is a more efficient approach.

Take this as an example,

const myFileReader: FileReader = new FileReader();

myFileReader.onload = (event: Event) => {
   event.target.result; // Avoid using this
   myFileReader.result; // This is the correct way
};

Initially, my previous type script had the parameter "imgsrc" with a default type.

However, I decided to change it to (imgsrc:any) and it is now functioning properly.

var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc:any){
var fileUrl = imgsrc.target.result;
}

The problem lies within the TypeScript definitions. One quick fix is:

let element: any = e.element; //<-- Using (any) here will silence the compiler!
let data: string = element.value;

To inform TypScript of the expected type, simply specify it.

Check out this solution:

let writer = new FileWriter();
writer.onload = function (event){
    let documentUrl = (<FileWriter>event.target).result;
}

In this scenario, you have the option to use writer.result as well.

If you're looking for a straightforward solution, then I found that this method worked perfectly for me.

var reader: any,
target: EventTarget;
reader = new FileReader();
reader.onload = function (imgsrc) {
    // var fileUrl = imgsrc.target.result; //change to
    var fileUrl = (imgsrc.target as FileReader).result; //cast to correct type
}

Upon examination of the lib.dom.d.ts file, the solution becomes clear:

let reader: FileReader = new FileReader();

reader.onload = (event: ProgressEvent<FileReader>) => {
   event.target.result; // This is permissible
};

It was successful for me today with TypeScript 2.1.1

interface EventTarget { result: any; }

When encountering this issue
The error "Type 'string | ArrayBuffer' is not assignable to type 'string'. Type 'ArrayBuffer' is not assignable to type 'string'" may appear

fileReader.result+' ';//this code snippet is valid
fileReader.result; //however, this one is invalid

After encountering issues with IndexedDB similar to those mentioned above, I found a solution that worked for me. By simply changing the arguments of the (event) functions to (event: any), I was able to bypass the type errors.

Here is an example of the code:

let request = window.indexedDB.open('userChannels', 3);

request.onerror = function(event: any ) {
    console.log('ERROR: Failed to create userChannels local DB' + event.target.errorCode)
};

request.onsuccess = function(event: any) {
   let db = event.target.result;
   console.log('SUCCESS: Created userChannels local DB')
};

Encountered a similar issue in my Angular project while using the FileReader.

The solution turned out to be quite straightforward (thanks to Typescript's strong typing). You just need to utilize the ProgressEvent<FileReader>. This can be located in the lib.dom.d.ts file within your Typescript installation, making it easily accessible if you include

lib: {
"dom"
}

in your tsconfig.json.

Below is the snippet of code where I had to implement this:

function read(file: File) {
  const fileReader = new FileReader();
  fileReader.onloadend = function (e: ProgressEvent<FileReader>) {
    const arr = (new Uint8Array(parseInt(e.target.result.toString(), 10))).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    console.log(header);

    // Check the file signature against known types

  };
  fileReader.readAsArrayBuffer(file);
}

in place of

    this.localDbRequest.onsuccess = function (event) {
      const db = event.target.result;
    };

try

   this.localDbRequest.onsuccess = function (event) {
     const db = this.result;
   };

To avoid errors until resolved, you can access the target object in the following way:

fileReader = new FileReader();
fileReader.onload = function (image){
    var url = image.target["result"];
}

Interpret the target as a JavaScript Object

this is an important update in JavaScript/TypeScript.

To adapt to this change, simply substitute "event.target.result" with "this.result".

In this context, "this" specifically refers to the interface "MSBaseReader".

Here is a snippet of how I implemented this change:

      let reader = new FileReader();
      let profile: TransProfile = new TransProfile();

      reader.onload = function(event){
        profile.avatar = new Uint8Array(this.result);
      }

      reader.onerror = function(event){
      }

      this.photoLib.getPhoto(item)
        .then(blob => reader.readAsArrayBuffer(blob))
        .then(() => this.doUpload(profile));

Definition of "MSBaseReader" interface:

interface MSBaseReader {
    // Interface properties and methods listed here
}

Definition of "FileReader" interface:

interface FileReader extends EventTarget, MSBaseReader {
    // More interface properties and methods specified here
}

It's worth mentioning that due to the shift in the context of "this" inside "onload()", you won't be able to directly access your class-based definitions within "reader.onload = function(event){...". This means that you can't use "this.class-property" syntax to refer to your class properties. Instead, you'll need to define local variables like I did with "profile" in the example above.

Give this a shot.

event.target["result"]