Typcript + Angular 2: Как я могу гарантировать, что метаданные метаданных, обработчиками которых будут ссылаться на переменные в области видимости, чтобы избежать «неопределенной» ошибки?

Question

Я столкнулся с крахом в своем веб-приложении на Safari, потому что определение типа для функции относится к интерфейсу TouchEvent. Эта переменная издавалась дословно в метаданных декоратора в скомпилированном JS и is not implemented in desktop Safari.

Этот конкретный случай был легко решить (вместо этого я использовал только Event), но это оставило меня в недоумении ... есть ли там какие-либо другие метаданные-декораторы в моем приложении, разбивающиеся на некоторые браузеры, которые я не тестировал?

Вот пример Угловое 2 директива, которая иллюстрирует проблему:

import { Directive, HostListener } from '@angular/core'; 

@Directive({ 
    selector: '[touchTest]' 
}) 
export class TouchTest { 
    constructor() { } 

    @HostListener('touchend', ['$event']) onTouchend(event: TouchEvent) { 
     console.log(event); 
    } 
} 

Если вы собираете это с tsc touch-test.ts --emitDecoratorMetadata --experimentalDecorators, выход включает в себя (полный выход JS here) это:

__decorate([ 
    core_1.HostListener('touchend', ['$event']), 
    __metadata("design:type", Function), 
    __metadata("design:paramtypes", [TouchEvent]), 
    __metadata("design:returntype", void 0) 
], TouchTest.prototype, "onTouchend"); 

Что касается TouchEvent throws TouchEvent is not defined на Safari.

Я заметил, что некоторые другие типы параметров (те, которые я явно импортировал?) Испускаются просто как Object в результате JS, который гарантированно будет в безопасности. Я также вижу, что interface TouchEvent определен в нескольких файлах .d.ts в модуле npm typescript, поэтому я смог использовать его без ошибок при компиляции.

Есть ли общее правило для предотвращения подобных проблем? В моей среде может быть какая-то проблематичная настройка (я начал с angular2-webpack-starter), но просматривая tsconfig.json и другие, возможно, соответствующие файлы конфигурации, ничто не выскочило на меня.

Answer 1

Файлы lib.d.ts просто используют последний веб-сайт и мало заботятся о старших и отсутствующих браузерах. И они не должны. Это зависит от вас, чтобы проверить, доступен ли встроенный класс/объект в браузерах, которым вы хотите оказать поддержку. Если это не так, вы можете использовать полисы или найти другой путь вокруг него или отказаться от поддержки этих браузеров (я предлагаю последнее: не нужно останавливаться в прошлом или поддерживать браузеры, которые отказываются соответствовать последним стандартам)

Answer 2

Другой вариант - использовать hammer.js.