将 svg.js 与 TypeScript 结合使用

Question

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

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

这可能吗？如果是这样，怎么办？

Answer 1

svg.js 提供了一个 .d.ts 文件，因此您可以在开箱即用的打字稿中使用它。

我正在使用 vscode，它不需要进一步配置来提供智能感知。

CommonJS 风格

ES 6 风格 或者

vscode将js和ts服务紧密集成，因此它可能提供某种自动检测功能。我从未使用过 Atom，但我认为您可以使用 Triple-Slash Directives

明确声明您的引用

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

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

Answer 2

参加聚会已经很晚了，但由于我已经浪费了大部分时间来努力从打字稿中使用 svg.js，我想分享解决方案：

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

npm install svg.js --save

安装的软件包包含所谓的 typedef 文件

svg.js.d.ts

。

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

在您的“.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()
};

这将呈现一个红色矩形。