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
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.
So enjoy generator-polymerts
Comments
Post a Comment