angular error: WordCloud is not a function

Question

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

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

请参阅附件中的代码示例：

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

angular 错误：WordCloud 不是函数

Answer 1

尝试像这样更改第 49 行：

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

在您提供的 stackblitz 中，我在 WordClound 命名空间中看到了 'default' 函数。希望对您有所帮助！

Answer 2

从
更改第 2 行 import * as WordCloud from 'wordcloud';
至：
import WordCloud from 'wordcloud';

这两个导入语句的区别在于，您使用的导入语句会将整个模块作为一个对象导入，而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() 将 return "bar"。那是因为导出的变量基本上没有导出它的名字，而是有一个特殊的名字"default"。

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

angular error: WordCloud is not a function

angular error: WordCloud is not a function

angular

angular7

typescript-typings

external-js

wordcloud2