svg.js 不适用于 Typescript 和 Stencil.js答案

【问题标题】：svg.js not working with Typescript and Stencil.jssvg.js 不适用于 Typescript 和 Stencil.js
【发布时间】：2018-06-15 02:44:49
【问题描述】：

我有一个使用 Typescript 构建的基本 Stencil 应用程序。我没有使用 Angular。我无法使用 svg.js。

这是我的完整组件：

import { Component, State } from '@stencil/core';
import * as moment from 'moment';
import * as SVG from 'svg.js';

@Component({
  tag: 'astro-sandbox',
  styleUrl: 'sandbox.css'
})
export class AstroSandbox {
  componentDidLoad() {
    // console.info(SVG)
    let drawing = SVG('drawing');
  }

  render() {
    return (
      <div>
        <div id="drawing">
        </div>
      </div>
    );
  }
}

{ Error: Cannot call a namespace ('SVG')... 失败

我尝试使用 console.info('SVG') 查看 SVG，它可以编译，但浏览器给了我错误 TypeError: Cannot set property 'SVG' of undefined.

我知道我的应用程序可以正常工作，并且 moment.js 工作正常，因此不存在 TS 配置问题。 VS Code 中用于 svg.js 的 Intellisense 也可以正常工作。

【问题讨论】：

由于某些原因，导入无法正常工作。尝试从 svg.js 导入 SVG 或使用 require。

标签： typescript svg.js stenciljs

【解决方案1】：

这是 svg.js 中的一个已知错误。可以看到对应的issuehere。问题是，svg.js 将自己添加到this。在 ECMAscript 262 this 在此上下文中未定义以防止乱扔窗口对象。在此期间您可以使用此 PR 的代码：https://github.com/svgdotjs/svg.js/pull/867

【讨论】：