RaphaelJS 不会使用打字稿构建

Question

我正在尝试将现有的 raphaelJS 图包含到一些新代码中，但总是出现错误。

Cannot call a namespace ('Raphael')

我已经将 @types/raphael 和 raphael 安装到 devDependencies 中。使用以下行将其导入打字稿文件。

import * as Raphael from 'raphael';

我感觉这个错误与 createPaper() 函数有关，但 Raphael 和 raphael 的不同组合不会产生更好的结果

ngAfterViewInit() {
    this.createPaper(this.radius * 2, this.radius * 2);
    this.drawCompass(this.radius, this.thickness);
    this.drawDirection(this.radius, this.thickness);
}

private createPaper(width: number, height: number) {
    this.paper = Raphael(this.compass.nativeElement, width, height);
    this.paper.setViewBox(0, 0, width, height, true);
    this.paper.canvas.setAttribute('width', '100%');
    this.paper.canvas.setAttribute('height', '100%');
  }

Answer 1

raphael 的声明使用 export assignment，因此应使用导入分配导入模块：

import Raphael = require("raphael");

或者如果启用了 esModuleInterop 选项，则可以使用默认导入：

import Raphael from "raphael";

启用 esModuleInterop 后，像 import * as Raphael from "raphael"; 这样的名称空间导入将失去原始导出分配的可调用性。（当 esModuleInterop 被禁用时，命名空间导入保持可调用性，但这被认为是遗留行为。）

我用 TypeScript 3.1.3 尝试了你的代码，得到了更好的错误消息，并提供了针对上述两种替代方案的代码修复（我没有研究引入此功能的 TypeScript 版本），所以它是很高兴保持最新状态。

RaphaelJS 不会使用打字稿构建

RaphaelJS will not build with typescript

typescript

raphael