TypeScript examples

[Thomaash]

Since Vis Network has official TypeScript support now there should be examples in TypeScript to help people get started.

[jrodva]

Hi @Thomaash, I would like to contribute in this project, I have created a little Angular project with one example of custom nodes and custom edges, however, I have an error related with include vis-util, vis-data and moment. Should it be necessary to include those dependencies in my project? Those dependencies are included in the vis-network library, could you help me, please? My repository is https://github.com/jrodva/vis-network-ts and my current error is:

[Thomaash]

Hi @jrodva,

please, switch to standalone (CSS, Util and Data are bundled, TS declarations are not) or peer (CSS, Util and Data have to be loaded separately) build for examples. The legacy one is kept only for backwards compatibility, has issues and we don't want to encourage people to use it hence https://visjs.github.io/vis-network/examples/network/basic_usage/legacy.html saying: Please don't use this. Eventually it will be deprecated and removed entirely.

Regarding the error it is always necessary to include the dependencies because the declarations reference them. My attempts to bundle the types into a neat single file so far always failed.

[Thomaash]

PS: You can import like import { DataSet, Network } from "vis-network/standalone"; the /esm/vis-network part is optional now.

[jrodva]

Thank you @Thomaash. I will try with those recommendations.

[jrodva]

@tomap I kept your instructions(my repository is updated) and I had another different error: But I solved updating my project to Angular8, because it was necessary at least Typescript 3.5 😄

[jrodva]

Now I have the base ready, what are the next steps to include this project like a Typescript example? I can create more examples in this project and add tests if it's necessary.

[Thomaash]

To be honest I have no idea. All examples so far were simple pages simply placed among examples. There were never any build steps etc.

[Thomaash]

So after checking it out I found out it loads it's files from the root of the server it's started on not relatively. In other words as it is at the moment it can't be deployed on GH Pages at all not mentioning coexisting with other projects.

Also clicking the add new node button more than once causes errors.

And one last thing I wouldn't call this TypeScript example but rather Angular example. When I opened this I meant pure TypeScript without any framework.

[jrodva]

I have just fixed the error with the add new node button, thank you for your Q&A. Now, I got it what you wanted to say, in the future I will create a Typescript project without any framework.

[Thomaash]

Thanks and just to note I'm not opposed to having Angular examples. As long as people use it's great to have some examples to have them started. It's just not what I meant when I opened this issue.

I'll have to think of a way to include this in the examples. I'd like to do it in a way that people could simply open it without installing and building anything just like with the other examples.

[jrodva]

Ok, don't worry. I think that https://stackblitz.com/ is a good option, even it's possible to include easily it in any web https://stackblitz.com/docs#embedding.

[brijenshah]

I created Typescript examples and raise a pull request: https://github.com/visjs/vis-network/pull/617. I am using React + Typescript and created placeholder to add more examples. Please review and advise.

[tillias]

I have managed to progress with this stuff in Angular 8 as described in #679. Unfortunately there is some problem with Canvas I can't solve without community help

[laike9m]

+1

[Clay-Ferguson]

I'm also a TypeScript developer trying to install with NPM:

npm install vis-network

when i try to compile it gave errors about vis-data not being found.

So then I installed it:

npm install vis-data

I'm trying to import like this:

import { Network, DataSet, Node, Edge, IdType } from 'vis-network/standalone';

but I just keep getting compile errors like this:

[INFO] ERROR in [at-loader] ./node_modules/vis-network/declarations/network/Network.d.ts:19:50 
[INFO]     TS2307: Cannot find module 'vis-data' or its corresponding type declarations.
[INFO] 
[INFO] ERROR in [at-loader] ./node_modules/vis-network/declarations/entry-standalone.d.ts:2:23 
[INFO]     TS2307: Cannot find module 'vis-data/esnext' or its corresponding type declarations.
[INFO] 
[INFO] ERROR in [at-loader] ./node_modules/vis-network/declarations/entry-standalone.d.ts:4:42 
[INFO]     TS2307: Cannot find module 'vis-data/esnext' or its corresponding type declarations.

anyone ever figured out how to get TypeScript actually working ?

[Thomaash]

Hi @Clay-Ferguson,

this is very offtopic, could you create a separate issue to track this, please?

Thanks.

[Clay-Ferguson]

This looked like the topic for why npm install vis-network doesn't successfully install for TypeScript. Anyway, sure I'll create new topic. thanks!

UPDATE: it's done. new issue created. In case you wanted to delete my posts in here. :)

[cubuspl42]

https://github.com/visjs/vis-network/issues/930