I'm newbe in typescript and trying to use jointjs definition file with typescript 2.2.
this is definition file in github.
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jointjs/index.d.ts
to import jointjs to my typescript file i use
import { joint } from 'jointjs';
How can I call classes and functions from index.d.ts file?
The JointJS library comes with the type definitions so you don't have to install separate typings, just npm install --save jointjs will be enough. And then you can use import and use the library like:
import * as joint from 'jointjs';
let circle = new joint.shapes.basic.Circle();
You can get all your class elements and functions by using joint .
var paper = this.paper = new joint.dia.Paper({
width: 1000,
height: 1000,
gridSize: 10,
drawGrid: true,
model: graph,
defaultLink: new joint.shapes.app.Link,
defaultConnectionPoint: joint.shapes.app.Link.connectionPoint,
interactive: { linkMove: false }
});
Related
I have a typescript project,
I am trying to import read-more-react but beacuse it doesn't have a #type defined for it, I need to write the index.d.ts file myself (place it under #type/read-more-react),
I have tried this:
declare module 'read-more-react' {
import React from 'react';
declare const ReadMoreReact: React.FunctionComponent<ReadMoreReactProps>;
}
interface ReadMoreReactProps {
text: string
min: number
ideal: number
max: number
readMoreText: string
}
but it doesn't seems to work,
can anyone help me in how to successfully implement the index.d.ts file, what am I missing ?
Inside your tsconfig.json file, you need to include your index.d.ts file.
You can do so by adding the following:
{
"include": [
"path/to/your/index.d.ts",
]
}
Also use this code instead:
declare module 'read-more-react' {
import React from 'react';
interface ReadMoreReactProps {
text: string
min: number
ideal: number
max: number
readMoreText: string
}
const ReadMoreReact: React.FC<ReadMoreReactProps>;
export default ReadMoreReact;
}
I'm trying to use a plain javascript library (cytoscapejs) into my angular application that is generated using jhipster. I installed the library using npm and added the js file to my vendor.ts file. When I tried to use the library in my component, it is not available. When I inspect I see the library in the source under webpack, but that library is not loaded. I followed the instruction in the ReadMe as it is. Am I missing some additional steps?
Steps followed:
npm install cytoscape
added cytoscape.js to vendor.ts
added the following line in my component "declare const cytoscape: any;"
Tested the code.
"cytoscape is not defined"
But If I add cytoscape cdn link directly in my index.html it works. But I want jhipster vendor build to include cytoscapejs.
Is all the javascript libraries added to vendor.ts gets executed/linked?
Any help would be appreciated.
Cytoscape looks like a nice tool, I never used it before so I integrated it from scratch however it could be easier using one of the few Angular wrappers that exist for it.
The final github repository and the detailed instructions below which are similar to the ones from the Leaflet example from JHipster generated project's README.md with one difference about which bundle to import in vendor.ts and it could be the most important part Cytoscape JS can be used also in a Node app (I followed their doc which mentions webpack)
Install cytoscape using npm install --save-exact cytoscape
Install cytoscape types using npm install --save-dev --save-exact #types/cytoscape
Edit app/vendor.ts
/* ESM version of cytoscape for webpack */
import 'cytoscape/dist/cytoscape.esm.js';
Edit app/home/home.component.html to add a container for our graph
<!-- cytoscape container -->
<div id="cy"></div>
Edit app/home/home.scss to style our container with at least width and height
#cy {
width: 400px;
height: 200px;
}
Edit app/home/home.component.ts to define our graph by importing cytoscape module, then initializing it in ngOnInit()
import * as cytoscape from 'cytoscape';
#Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['home.scss'],
})
export class HomeComponent implements OnInit, OnDestroy {
account: Account | null = null;
authSubscription?: Subscription;
cy: any;
constructor(private accountService: AccountService, private loginModalService: LoginModalService) {}
ngOnInit(): void {
this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
this.cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
}
and here is the result:
I recently started using a Node library called bpmn-js (npmjs.com).
It is written in JavaScript, and I'd like to have typings. Thus, I've began reading about d.ts files.
I created this folder structure
webapp
#types
bpmn-js
index.d.ts
With a simple content
declare module 'bpmn-js' {
export class BpmnJS {
constructor();
}
}
But this doesn't seem to work.
"Before" typings, I was able to import the object I needed using
import BpmnJS from 'bpmn-js';
And I was able to instantiate it using
new BpmnJS();
How can I get the typings file to be recognized?
I'm using WebStorm 2019.1.*.
Pretty simple, I was missing export default, or better, the default part.
declare module 'bpmn-js' {
export default class BpmnJS {
constructor(param?: { container: string });
...
}
}
Now this works too
import BpmnJS from 'bpmn-js';
I have difficulties importing svg.js with it's plugins using typescript in an Angular 5 project.
With npm I installed:
svg.js
svg.draggable.js
In ticket.component.ts:
Imported svg.js as Svg type and this way I can draw a rectangle, this code works:
import * as Svg from 'svg.js'
...
export class TicketComponent implements OnInit {
ngOnInit() {
let draw = Svg('ticket-svg').size(1000, 500);
let rect = draw.rect(800, 300).attr({fill: '#fff', stroke: '#000', 'stroke-width': 1});
}
...
}
But I cannot use functions from the svg.draggable plugin, because it's not imported:
rect.draggable()
// TS2339: Property 'draggable' does not exist on type 'Rect'.
I want something like this:
import * as Svg from {'svg.js', 'svg.draggable.js', 'svg.whatever.js'}
In the GitHub example code of svg.draggable.js they just add these two lines in the html and that's all:
<script src="svg.js"></script>
<script src="svg.draggable.js"></script>
In angular with typescript, this is completely different because I need the import in the ticket.component.ts file, not in the html.
So how to import svg.js with multiple plugins from node_modules as Svg type?
Update 1:
I read a recommendation to import the typings for these 3rd party js libraries, so I installed:
"#types/svg.js": "^2.3.1",
"#types/svgjs.draggable": "0.0.30"
Update 2:
Tried to merge the two js file into one file and import the merged version, but for some reason this hacky way does not work either...
Thanks in advance!
Unfortunately svgjs.draggable.js doesn't have a definition type file so you can't import it with the ES6 import/export like svg.js. the definition type file is the file that has the extension d.ts which you can find in the root of the library.
Also in our case svgjs.draggable extends svg.js. So we need to import svgjs.draggable after svg.js. So how to do that?
The solution is to import them both either from index.html or using angular-cli.json. I'll choose the latter one.
First install both libraries:
$ npm i svg.js -s
$ npm i svg.draggable.js -s
Add to angular-cli.json
"scripts": [
...
"../node_modules/svg.js/dist/svg.min.js",
"../node_modules/svg.draggable.js/dist/svg.draggable.min.js"
...
],
Next tell typescript to stop complaining
We'll do this by using the following syntax declare const which tells typescript that the import does really exist but you just can't know it because you didn't find the definition types file.
So in a component I did a small demo.
import { Component, OnInit } from '#angular/core';
declare const SVG:any;
#Component({
selector: 'app-root',
template: `<div id="canvas"></div>`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
ngOnInit() {
const draw = SVG('canvas').size(400, 400);
const rect = draw.rect(100, 100);
rect.draggable();
}
Update: Opps...realized your problem was with svg.draggable.js not just svg.js. I'm going to leave this here if anyone else needs this guidance. Sorry for any confusion.
The following worked for my setup (Angular 9, Typescript, SVG.js v3.0).
Install SVG.js
npm install --save #svgdotjs/svg.js
Import into Component
Per the SVG.js Getting Started guide, import SVG into your component.
import { SVG } from '#svgdotjs/svg.js'
Use SVG as wanted
export class MyComponent implements OnInit {
constructor() {}
ngOnInit(): void {
// don't forget to add "#" CSS selector to the name of the DOM element.
const draw = SVG().addTo('#canvas').size(400, 400);
const rect = draw.rect(100, 100, );
}
I have imported both pixi and pixi-filters like so:
import 'pixi.js';
import 'pixi-filters';
However, after running the code:
const outlineFilterRed = new PIXI.filters.GlowFilter(15, 2, 1, 0xff9999, 0.5);
Following error is thrown:
Property 'GlowFilter' does not exist on type 'typeof filters'.
What am I doing wrong?
P.S
I'm following this example: https://pixijs.github.io/examples/#/filters/outline-filter.js
Seems like every filter needs to be imported individually, like it's written in the GlowFilter's README.md on Github.
Install:
npm install #pixi/filter-glow
Import:
import { GlowFilter } from '#pixi/filter-glow';
According to the definitions file, the GlowFilter (And other filters) do not exit. And according to the original js library they should exist.
This simply means that the definitions files are out-dated.
You have two options:
Add a local definitions to the PIXI.filters.
Create a PR to the definitions repository. (BEST)