angular - 如何使用 typescript/angular 2 正确使用 PrismJS 及其类型

Question

我正在使用 angular-cli 构建一个小应用程序，我想使用 PrismJS 但我无法让它工作。

基本上，我创建了一个vendor 文件夹，我将我的 Prism 脚本和样式放在其中，并将它们加载到 index.html 中。

我还需要安装类型定义以便能够编译我的应用程序:

npm i --save-dev @typings/prismjs

然后，我只需在我的代码中的任何位置调用 Prism.whatever()，但这不起作用。

甚至我的 IDE 也无法识别命名空间 Prism。

通过查看定义(index.d.ts)的内容我看到从1.6版本开始，不包含

declare var Prism : PrismJS.Prism;

不再。只有一些 export namespace Prism。所以我想知道我是否必须导入一些东西，因为使用了任何 declare。

从定义文件中导入一些东西对我来说似乎很奇怪。

因为我想跳过这个，所以我安装了一个旧版本的定义 (1.4.16)，其中包含

declare var Prism : PrismJS.Prism;

现在，我的 IDE (webstorm) 很开心!它可以识别 Prism。但是当我尝试编译时，webpack 仍然输出错误:

Cannot find name 'Prism'

所以我的问题很基本:我忘记了什么？

很抱歉这个显而易见的问题。

谢谢!

Answer 1

在 angular-cli 中添加这样的 prism.js:

"scripts": [
   "../node_modules/prismjs/prism.js"
],

在那之后，你可以让 typescript 满意

declare var Prism;

然后像那样使用它

<code [innerHtml]="myCode"></code>

ngAfterViewInit() {
   const code = 'var data = 1;';
   this.myCode = Prism.highlight(code, Prism.languages.javascript);
}