Billboard.js: TypeScript support

[porfirioribeiro]

I wan't to use billboard.js in a TypeScript project but i can't find ant typing's for this package.
Is there any typing's available or planed to do in the future?

[netil]

Hi @porfirioribeiro, I have plan to add definition only.
There's no plan on transitioning whole codebase to TS.

[porfirioribeiro]

Great, just definitions would be fine

[rexebin]

There is a c3js definition available at DefinitelyTyped. I believe using it as a starting point, with minor adjustments, a billboard definition could be created very quickly and easily thanks the hard work the creators of the c3js definition.

At the moment, I copied the c3js interfaces from its DefinitelyTyped source to my project. With the interfaces, I could use billboard.js typed. However it is not ideal, in an Angular project, I had to add d3.js and billboard.js scripts to angular.json. The difference is that if I use c3js and its DefinitelyTyped package, I can simply import symbols in my code, no need to add scripts, the angular cli would load the scripts for me without configuration.

The DefinitelyTyped package is very important to extending Billboard.js' user base to typescript users. Please consider add the definitions sooner rather than late.

[netil]

@rexebin thanks for informing that.
I was thinking a way to generate automatically based on the jsdoc comments to not being maintaining this manually.

And how about send a PR your edited definition?

[rexebin]

@netil generating it automatically would be lovely. However, while you figure out how to generate the types from jsdoc, I think it is a good idea to put a DefinitelyTyped in place asap. As a typescript user, I am confident to say that it makes a world of difference.

I am not sure how much changes were make to the apis since the fork of c3 last year. What I did was simply copy the interfaces from c3's definition to a ts file in my project. Then when I declare bb, mapping data and configuring options etc, I specify their types.

I compared the definitions against billboard.js' api doc, they are mostly identical. But I am just getting started, I will make necessary adjustments to the interfaces when I see the differences later on.

I am happy to work with you and publish a PR on definitelytyped repo if you are interested. If you are, please let me know.

[netil]

I was digging for some tools for jsdoc to TS definition, but none of they are really properly working.
So, as a start I love your idea on working with the initial version you made. :)

[rexebin]

@netil Let's do this. I will fork the DefintelyTyped repo and add a type for billboard.js. I will send an invitation to you.

[rexebin]

@netil I have setup an angular cli project to test how the types would work. At the moment, billboard only export bb, the definition has to match the export, therefore we have to use bb to draw charts. It would be better if billboard export symbols instead of wrapping them under bb.

You can see it in action on stackbliz.

[rexebin]

@netil Invitation to the repo is sent. Please feel free to play with it.

[netil]

@rexebin I'm quite busy now. I'll be heading soon adding types for new options.

[rexebin]

@netil please take your time. I think with the custom types here, although far from perfect, typescript users can start using the library typed.

[netil]

@rexebin during the work, I just come up on maintainability issue.
Is okay provide types via DefinitelyTyped repo, but I think it will have some difficulties updating regularly.

So, in longer term, I think is appropriate provide as a part of the package.
I just added the first initial version of the definition.

• https://github.com/naver/billboard.js/tree/tsd%23629/types

Hope to get some feedback from you.

[rexebin]

It would be even better with the types included in the package.

[rexebin]

@netil I installed billboard from the tsd branch, but my angular project will not build, complaining Module not found: Error: Can't resolve 'billboard.js'.... The Editor recognize the type just fine.

[netil]

@rexebin Just merged to master. I fixed the module issue adding module declaration.

Thanks for the contribution~!

[rexebin]

@netil My angular project is still not building. I installed Billboard.js from the master branch.

Same Error: Cannot find Module 'billboard.js'. I tried to fix it, but miserable failed.

If you can get an Angular Cli 7 project work, can you share it please?

[netil]

@rexebin, d.ts is just for typing code assistance purposes.
I tested creating a simple test importing module as you can see from the below screen capture.

default and named imports works as well, giving its codes suggestion.

Try installing the nightly pointing branch repo directly in your package.json file.

// package.json
  "dependencies": {
          ...
          "billboard.js": "git://github.com/naver/billboard.js.git#nightly"
  },

[rexebin]

@netil I installed from the master branch. The code assistant works correctly. The issue is when Angular Cli/nx builds the project, the error appears and build fails.

I will install from nightly later and let you know. Thanks.

[rexebin]

@netil as you can see from #685 's StackBlitz example, installing from nightly build works fine. I will try on my project later.

[rexebin]

Hi @netil, may I make a few suggestions please:

1. rename interface Options to ChartOptions or something similar, the name is too generic and it is a pain finding billboard.js from a long list given by the IDE/editor. The same goes to Data although the list is significantly shorter.
2. re-export Chart, Options and Data and alike in index.d.ts, so that when we import, they are all imported from 'billbroad.js', no long path like 'billboard.js/types/options'

If you agree, I could make a PR.

[netil]

@rexebin great, could you make PR?