Create Typescript Definition from Polymer Element using Yeoman


Javascript evolution

Growing fame of javascript language not only in front-end development but also to develop back-end application (aka isomorphic development), has put in evidence the need to evolve such language to give a developer the same level of abstraction of other languages (eg. java c# swift) and so the ECMA6 standard has came out.


With ECMA6 for the first time in its history, javascript deal with portability issue and we have to understand how javascript will overcome such problem

Why Typescript ?

In the meanwhile Typescript is , in my opinion, one of the better choices for developer in order to use a expressive & modern language without deal with portability issue. Typescript is a very mature language and Microsoft, with helps of  Community, are very active on it and so hence a lot of tools and facilities are available for us.

Using Typescript and Polymer(TS) 

The Webcomponents have changed the way to approach web development, Polymer has provided a complete "production ready" framework to build applications using them. 
As said in this post Polymer+Typescript the marvelous couple, I'm developing with Polymer and Typescript  using PolymerTS project that perfectly joins both of them.

Yeoman Generator for creating a Polymer Element in Typescript

After a while I've decided that was need to have some accelerators, so I've started to develop a PolymerTS Yeoman Generator to speed up the startup phase. In the first versions I've focused my effort on scaffold a new Polymer element in Typescript using PolymerTS stuff. below its usage

$ yo polymerts:el my-element [--path <output>] [--nodecorator]

The importance of Typescript Definitions (.d.ts)

Scaffolding is a good start but, in order to work with Typescript in effective way, we need to have definitions (ie. .d.ts files) of third party elements that we use in our application. Definitions have double value: 
One is: provide a, well defined and readable, description of the element that we are going to use.
Second is: Providing meta-information to Typescript-aware IDE (eg. Atom, VSCode, ... ) that allow  to enable the "intellisense", feature very appreciate by developer. 
About that, there is a huge Typescript definitions' repository DefinitivelyTyped , where you can found the definition that you need.

Create a Typescript definition from a Polymer Element 

But what happen if you haven't definition? You could build one from yourself or simply work without it.
Unfortunately, in the case of Polymer's elements, we haven't  all definitions ready to use, but don't worry the Yeoman generator, currently, is able to create Typescript's definitions from Polymer Element.


Here we go. Relying upon a package provided by Polymer's team itself, named Hydrolysis, from release 0.3.0 of generator-polymerts I've implemented a gen goal that create a Typescript definition from a Polymer's Element
Use it is pretty straightforward, it is enough give the element name and the related typescript definition will be created. below its usage.


$ yo polymerts:gen polymer-element [--path <output>] [--elpath <source path>]

Take note that assumption is  that such element has been already installed and available in bower_components folder.

Conclusion

Hope this generator helps who is approaching to work with Polymer and, like me, loves develop using Typescript.



Comments

Popular posts from this blog

POLYMER + TYPESCRIPT the marvelous couple

PlantText: The new "Online" UML Editor powered by PlantUML

PlantUML & Maven - Enrich your project's documentation