如何在 VS Code 的 Angular 工作流程中使用 Pusher-JS？

Question

我从一家通过 Pusher 提供市场数据的公司那里得到了以下一小段 JavaScript 代码，它运行良好。

<script src="https://js.pusher.com/4.2/pusher.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var placeholder = document.getElementById('trades_placeholder'),
        pusher = new Pusher('xxxxxxxxxxxxxxxxxxxx'),
        tradesChannel = pusher.subscribe('live_trades');

    tradesChannel.bind('trade', function (data) {
        placeholder.innerHTML = "Price: " + data.price + "<br>Timestamp: " + data.timestamp;
    });
</script>

我试图让它在 Vs Code 的 Angular-TypeScript 工作流程中工作，但我收到以下错误：

我已经通过 npm 安装了 pusher-js。

这是我在 Angular 项目文件中制作的所有代码的图片，我用黄色标记了所有相关的 Pusher-JS 更改：

很明显我遗漏了什么，但我不知道是什么。下面我在 zip 中附上了 JavaScript 和 Angular（只与整个项目相关）文件，所以你可以看看，不幸的是我无法提供 pushers key number 但它没有'没关系，因为我只需要知道如何正确设置项目。

附件： JavaScript file and Angular TypeScript files ZIP

Answer 1

我认为我们需要告诉 TypeScript Pusher 作为全局变量存在，否则编译器会报错。将下面的行添加到 app.component.ts:

的顶部

declare var Pusher: any;

Answer 2

而不是这个：

import { Pusher } from 'pusher-js';

需要这样：

import * as Pusher from 'pusher-js';

如何在 VS Code 的 Angular 工作流程中使用 Pusher-JS？

How to use Pusher-JS within VS Code's Angular workflow?

javascript

pusher

typescript

visual-studio-code

angular