angular - Typescript + Angular 2 : How can I ensure emitted decorator metadata will refer to variables in scope, 以避免 "not defined"错误？

Question

我在 Safari 上的 Web 应用程序中遇到了崩溃，因为函数的类型定义引用了 TouchEvent 接口(interface)。该变量在编译后的 JS 的装饰器元数据中逐字发出，并且 is not implemented in desktop Safari .

这个特定的实例很容易解决(我只是使用 Event 代替)但它让我想知道......我的应用程序中是否有任何其他装饰器元数据在我没有的某些浏览器上中断'测试了吗？

这是一个说明问题的示例 Angular 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 的引用在 Safari 上抛出 TouchEvent is not defined。

我注意到一些其他参数类型(我明确导入的参数类型？)在生成的 JS 中作为 Object 简单地发出，这保证是安全的。我还看到 interface TouchEvent 是在 typescript npm 模块的几个 .d.ts 文件中定义的，所以我可以在没有在编译时引发错误。

是否有避免此类问题的一般规则？我的环境中可能存在一些有问题的设置(我从 angular2-webpack-starter 开始)但是查看 tsconfig.json 和其他可能相关的配置文件，我没有发现任何问题。

Answer 1

lib.d.ts 文件只使用最新的 webspec 并且很少关心旧的和缺少的浏览器。他们不应该。由您来检查内置类/对象在您想要支持的浏览器中是否可用。如果不是，您可以使用 polyfills 或找到其他解决方法，或者放弃对这些浏览器的支持(我建议后者 :) 无需纠结于过去，或者支持拒绝遵守最新标准的浏览器)