Polymer TypeScript Starter Kit

Polymer Starter Kit w/TypeScript support

Features

• Inline TypeScript transpilation (via <script type="text/x-typescript>)
• PolymerTS support

With inline TypeScript transpilation and PolymerTS, you could define elements like this:

<dom-module id="my-view3">
  <template>
    <h1>[[title]]</h1>
  </template>

  <script type="text/x-typescript">
    @component('my-view3')
    class MyView3 extends polymer.Base {
      @property()
      title = 'View Three';
    }
    MyView3.register();
  </script>
</dom-module>

You could also import TypeScript files like this:

<dom-module id="my-view2">
  <template>
    <h1>[[title]]</h1>
  </template>

  <script>System.import('components/my-view2/my-view2');</script>
</dom-module>

Quickstart

Install these packages:

• Node 4 or newer
• Bower
• Yarn
• Polymer CLI

Then run these commands to build the project and open a browser to it:

yarn
bower install
yarn build
yarn start

Gulp tasks

build         Builds HTML, styles, and scripts
clean         Deletes output directory and any intermediate files
csslint       Lints the CSS/SCSS files
html          Builds HTML files (and dependencies)
 --bundle      …bundle output
 --deps        …build dependencies
 --sw          …generate service worker
htmllint      Lints HTML files
images        Optimizes images
license       Verifies license headers
 --exclude     …glob patterns to exclude
 --include     …glob patterns to include
 -w            …write license headers if necessary
scripts       Builds all TypeScript files
serve         Starts development server
 --https       …enable https
 --port        …starting port number (default: 8080)
styles        Builds the CSS/SCSS files
tslint        Lints TypeScript files

Yarn scripts

build         Builds (runs `gulp`)
start         Starts development server (runs `gulp serve`)
test          Builds and then runs web-component unit tests
tezt          Run non-web-component tests with code coverage