使用 ngImgCrop 绕过 Typescript

Question

I'm new to coding and have the opportunity to do some small stories on a project to whet my teeth. Right now I'm working on getting profile picture selection and cropping into a webapp with AngularJS. I've selected ngImgCropper to handle the cropping. Here's a JSFiddle with boilerplate code: http://jsfiddle.net/a2ew3yhf/50/

And here's JavaScript from that link:

var handleFileSelect=function(evt) {
  var file=evt.currentTarget.files[0];
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope){
        $scope.myImage = evt.currentTarget.result;
    });
  };
    reader.readAsDataURL(file);
};

Here's my problem. My project uses Typescript, which doesn't support evt.currentTarget.result, so I get the following error:

Property 'result' does not exist on type 'EventTarget'

Is there any way to get around this?

Answer 1

Simple solution

If you sure that this property exist just make something like below

 var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
             $scope.$apply(function($scope){
                  $scope.myImage = (<any>evt.currentTarget).result;
              });
      };
      reader.readAsDataURL(file);
 };

Also you can create own interface that would be describe your target

  interface MyTarget {
        result:any;   //or type of image
  } 
  //skip some code
 $scope.myImage = (evt.currentTarget as MyTarget).result;

Complicated solution

You can provide own declaration of ngImageCroper or provide description for current event

   var handleFileSelect=function(evt: ImageCropEvent){
        //your    stuff
   }

Resource

1. Write your d.ts file