CODEWITHSUNDEEP
javascripttypescriptbrowsersvg.js
Magmatic
Magmatic

Reputation: 1951

Using svg.js with TypeScript

I'm making a website app using TypeScript, and I want to use the svg.js library.

I'm coding in TypeScript, and automatically compiling into JavaScript which runs in the browser.

Is this possible? And if so, how?

Upvotes: 2

Views: 5434

Answers (2)

Ognyan
Ognyan

Reputation: 13600

Quite late to the party but since I have wasted most of the day struggling to use svg.js from typescript I want to share the solution:

First (of course) you need to install the svg.js via npm.

npm install svg.js --save

Installed package contains the so called typedef file svg.js.d.ts.

You will also need to setup webpack or your favorite packager in order to prepare package for the web.

In your '.ts' file you paste:

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()
};

This will render a red rectangle.

Upvotes: 1

obfish
obfish

Reputation: 667

svg.js provides a .d.ts file so you can use it in typescript out of box.

I am using vscode and it needs no further configuration to provide intellisense.

CommonJS style CommonJS style

ES 6 style ES 6 style or ES 6 style

vscode integrates js and ts service tightly, so it may provide some kind of auto detection. I never used Atom but I think you can explicitly declare your reference using Triple-Slash Directives

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

If importing this still not helps, you may lack some kind of language service plugins.

Upvotes: 5

Related Questions