使用 svg.js 和 TypeScript答案

【问题标题】：Using svg.js with TypeScript使用 svg.js 和 TypeScript
【发布时间】：2018-02-12 01:01:57
【问题描述】：

我正在使用 TypeScript 制作一个网站应用程序，并且我想使用 svg.js 库。

我正在使用 TypeScript 进行编码，并自动编译成在浏览器中运行的 JavaScript。

这可能吗？如果有，怎么做？

【问题讨论】：

标签： javascript typescript browser svg.js

【解决方案1】：

svg.js 提供了一个 .d.ts 文件，因此您可以直接在 typescript 中使用它。

我正在使用 vscode，它无需进一步配置即可提供智能感知。

CommonJS 风格

ES 6 风格或者

vscode 紧密集成了 js 和 ts 服务，所以它可能会提供某种自动检测。我从未使用过 Atom，但我认为您可以使用 Triple-Slash Directives 明确声明您的引用

/// <reference path="path/to/yourTypeDeclaration.d.ts" />
// your code follows

如果导入仍然没有帮助，您可能缺少某种语言服务插件。

【讨论】：

太好了，所以这是可能的。但是怎么做呢？
@Magmatic import svg.js 并使用它？你有什么问题？
您提到它带有一个“.d.ts”文件，但您从未导入它。我的 IDE (Atom) 如何知道这个文件？您的代码从未提及它。
@Fuzzyma 你知道为什么select() 方法doesn't work 正确使用打字稿吗？它看起来像错误吗？
@magmatic - 我不知道。我想你需要在这里参考 atom 文档

【解决方案2】：

参加聚会已经很晚了，但是由于我浪费了一天的大部分时间来努力使用 typescript 中的 svg.js，所以我想分享一下解决方案：

首先（当然）你需要通过 npm 安装 svg.js。

nmp install svg.js --save

安装的包包含所谓的typedef文件svg.js.d.ts。

您还需要设置 webpack 或您喜欢的打包程序，以便为 web 准备包。

在您粘贴的“.ts”文件中：

import * as SVG from 'svg.js';

function a() {
    let draw = SVG(window.document.body).size('100%', '100%')

    draw.rect(400, 400).fill({ color: '#f00', opacity: 1 })
}


window.onload = (event) => {
    a()
};

这将呈现一个红色矩形。

【讨论】：