angular - 角度错误：WordCloud 不是函数

Question

我对 Angular 还是很陌生，我试图在我的应用程序中使用 wordcloud2，但在尝试调用函数时出现错误 WordCloud is not a function。

wordcloud2.js 包含 WordCloud 函数，我尝试导入它，但我对上述问题进行了编码，我想我遗漏了一些东西，我认为声明被识别但不是函数。

请参阅随附的此代码示例：

https://stackblitz.com/edit/angular-7hsahs

角度错误：WordCloud 不是函数

Answer 1

将第 2 行更改
import * as WordCloud from 'wordcloud';
为：
import WordCloud from 'wordcloud';

两个 import 语句的区别在于，你使用的那个将整个模块作为一个对象导入，而WordCloud()函数是它的一个属性。类型定义不支持这一点，因此 TypeScript 会抛出错误，因为您错误地告诉 TypeScript 导入模块的类型。
如果您改为使用 导入它import WordCloud from 'wordcloud';，则只会获得在类型声明中被描述为默认导出的函数。

基本上你有几种不同形式的出口：

export function foo() {return "bar";}
export const BAR = "foo";

在这里，您可以像这样导入不同的变量：

import {foo, BAR} from './foobar';
console.log(foo(), BAR); // "bar", "foo"

或这个：

import * as foobar from './foobar';
console.log(foobar.foo(), foobar.BAR); // "bar", "foo"

或者您有一个带有默认导出的导出，如下所示：

export default function foo() {return 'bar';}

在这种情况下，您可以像这样导入：

import foo from './foo';
console.log(foo()); // "bar"

或这个：

import {default as foo} from './foo';
console.log(foo()); // "bar"

虽然，如果给出了默认导出，您可以将导入的变量命名为任何您想要的名称。在上面的示例中，import bar from '.\foo';也可以使用，并且调用bar()将返回"bar"。那是因为导出的变量基本上没有导出它的名字，而是有一个特殊的名字“default”。

您可以在此处阅读有关在 TypeScript 中导入的更多信息：
https ://blog.jdriven.com/2017/06/typescript-and-es6-import-syntax/

Answer 2

尝试像这样更改第 49 行：

WordCloud.default(document.getElementById("my_canvas"), {
            list: temp});

在您提供的 stackblitz 中，我在 WordClound 命名空间中看到了“默认”函数。希望能帮助到你！