5.6.8. TypeScript Support

Since Release 6.9 you can scaffold TypeScript based Polymer client in Studio. When creating Polymer client module you will be able to select polymer2-typesript preset of the client. Main differences with basic JavaScript version:

Component classes are placed in separate *.ts files
myapp-component.ts 
namespace myapp {

  const {customElement} = Polymer.decorators;

  @customElement('myapp-component')
  class MyappComponent extends Polymer.Element {
  }
}
myapp-component.html 
<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="./shared-styles.html">

<dom-module id="myapp-component">
  <template>
     <!-- some html markup -->
  </template>
  <script src="myapp-component.js"></script>
</dom-module>
There is an additional phase of build process - TypeScript compilation

See scripts section of package.json

{
  "scripts": {
    "build": "npm run compile && polymer build",
    "compile": "tsc",
    "watch": "tsc -w"
  }
}

Now before polymer build there is npm run compile command which effectively runs TypeScript compilation (tsc).

Warning

If you change the source code of component classes and expect your changes to be picked by Studio’s hot deploy you should manually run npm run watch command in modules/polymer-client directory.