Question

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

无法调用名称空间（'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将不会使用打字稿进行构建

1 个答案: