geocoderResult: Argument of type '{ result: Result; }' is not assignable to parameter of type 'Result'.

[kneave]

I'm trying to use the geocoder and I'm only able to do so when I set the type to any on the function that receives the event. I'm new to Angular so probably using the wrong words so here's the code in question.

In map.component.html

<mgl-map
  [style]="'mapbox://styles/mapbox/streets-v9'"
  [zoom]="zoom"
  [center]="center"
>
  <mgl-control mglGeocoder (geocoderResult)="onGeocoderResult($event)"></mgl-control>
  <mgl-control mglGeolocate position="top-right" (geolocate)="onGeolocate($event)"></mgl-control>
  <mgl-control mglNavigation position="top-right"></mgl-control>
  <mgl-control mglScale position="bottom-right"></mgl-control>
</mgl-map>

and in map.component.ts I have

onGeocoderResult(result : Result)
{
  console.log(result.place_name)
}

This is the result when it tries to compile:

Error: src/app/components/leaflet-map/leaflet-map.component.html:6:63 - error TS2345: Argument of type '{ result: Result; }' is not assignable to parameter of type 'Result'.
  Type '{ result: Result; }' is missing the following properties from type 'Result': bbox, center, place_name, place_type, and 7 more.

   <mgl-control mglGeocoder (geocoderResult)="onGeocoderResult($event)"></mgl-control>

If I instead set the function to this I get results out fine:

onGeocoderResult(result : any)
{
  console.log(result["result"]["place_name"]);
}

Is the type actually just json or should I be handling this with Result as the type instead? If anyone could clarify this for me I'd appreciate it. I want to be doing things properly and I'm not sure if using any and parsing as json is a workaround or how I'm supposed to do it.