RaphaelJS не будет строить с машинописью

Question

Я пытаюсь включить существующую фигуру RaphaelJS в новый код, но получаю сообщение об ошибке.

Невозможно вызвать пространство имен ("Рафаэль")

Я установил как @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 использует назначение экспорта, поэтому модуль должен быть импортирован с использованием назначения импорта:

import Raphael = require("raphael");

Или если у вас есть esModuleInterop опция включена, вы можете использовать импорт по умолчанию:

import Raphael from "raphael";

когда esModuleInterop включен, импорт пространства имен, как import * as Raphael from "raphael"; теряет возможность вызова исходного экспортного назначения. (Когда esModuleInterop отключен, импорт пространства имен сохраняет возможность вызова, но это считается устаревшим поведением.)

Я попробовал ваш код с помощью TypeScript 3.1.3 и получил лучшее сообщение об ошибке и предложения по исправлению кода для обеих вышеперечисленных альтернатив (я не исследовал версию TypeScript, в которой была представлена ​​эта функциональность), так что хорошо быть в курсе Дата.