Question

首先，我对ng2和打字稿很新。

我想要完成的是在Angular2组件中实现Server-Sent事件。我已经按照这里的earlies帖子中提到的示例进行了操作，但我的问题是“EventSource”对象无法识别（在VS Code中为红色下划线）。

我不确定我是否遗漏了一些参考资料...... 我的推荐是：

<!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

这就是我实现eventsource客户端的方式：

   ngOnInit() {
      const observable = Observable.create(observer => {
        const eventSource = new EventSource(/API_URL); //Cannot find EventSource
        eventSource.onmessage = x => observer.next(x.data);
        eventSource.onerror = x => observer.error(x);

        return () => {
            eventSource.close();
        };
    });

    observable.subscribe({
        next: guid => {
            this.zone.run(() => this.someStrings.push(guid));
        },
        error: err => console.error('something wrong occurred: ' + err)
    });

Answer 1

事实上，TypeScript有两件事：

编译时间。编译器检查语法错误和类型。关于类型，它依赖于Uncaught (in promise) DOMException: key.usages does not permit this operation文件，这些文件可以在描述对象/类合同的文件中看到。
执行时间。如果对象存在于您的执行环境中，则代码将被执行。

在您的情况下，问题出在编译时。

以下是EventSource的d.ts文件示例：https://github.com/sbergot/orgmodeserver/blob/master/src/ts/deps/EventSource.d.ts

您可以通过以下方式获取它并在TypeScript文件的最开头引用它：

d.ts

Answer 2

let eventSource = window['EventSource'];

TypeScript不了解作为窗口一部分的EventSource。所以你必须先提取。

请参阅：https://github.com/OasisDigital/sse-a2-example/blob/master/src/app/sse.ts

Answer 3

您需要指定EventSource是window的函数，还需要将参数与之一起传递。

const eventSource = new window['EventSource']("http://url")

Angular2 /打字稿和SSE（EventSource）

3 个答案: