Create Typescript Definition from Polymer Element using Yeoman
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.
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.
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.
Hope this generator helps who is approaching to work with Polymer and, like me, loves develop using Typescript.
So enjoy generator-polymerts