Angular 2, Typescript, transpiled code type safety?

Viewed 246

I have a question regarding the transpiled code which comes out of typescript in conjunction with the HostListener decorator in Angular 2 (NOT a Safari problem, i only describe how I found that problem):

My upload component works well on every browser, except on Safari. We figured out that Safari has no DragEvent. I have had a typescript method which was looking like this:

@HostListener('drop', ['$event'])
public onDrop(event: DragEvent): void {
  .......
}

In the transpiled code of that has a decorator above the transpiled method, something like this:

t.b([ e.i(r.HostListener)(“dragover”, [ “$event” ]), t.c(“design:type”, Function), t.c(“design:paramtypes”, [ DragEvent ]), t.c(“design:returntype”, void 0) ], u.prototype, “onDragOver”, null),

As you can see, it adds design:paramtype metadata to the method. My naive thinking about typescript transpiling into javascript is, that javascript is not type safe and the :DragEvent in my typescript method helps the transpiler to make the type checks.

How I said, this method fails in Safari. When I now change the type of the event argument in my typescript method to :Event, Safari works well.

The only thing I can see is the metadata in the transpiled code above the method. But how and where, and why this metadata is used? Or why does this fails in Safari, im completely lost here, but I really want to understand it.

Thank your for your descriptions.

0 Answers
Related