Description
One of the directions modern web components are moving is declarative html. A bit likejsx but the other way around :) Now for html / js @rictic made a extension https://github.com/Polymer/vscode-plugin that brings auto completion for web components and their attribute defenition look up to a next level. https://youtu.be/zxcfPACo4-g?t=1h3m42s So that part is already done and backed by Google. Notice that we are talking web components in general here not just polymer.
The problem is there is no html inline ts solution yet. We can't really expect from the polymer team to integrate <script type="ts/module"> by themself in that extension.
Now because ts is baked in vscode, inline html / ts compile support should be baked in as well. My first step is to convince everybody here that if vscode can handle inline html / ts it would clear the way for using typescript web components by default. Right now typescript is not being used in polymer components because having two separate files, one for ts, one for html takes away the main strong point of declarative component programing. Jsx proved already that html and js logic can be used together as a great way to structure your code. At Google they do the same but in a more html declarative way.
Note that the feedback so far from vscode was that I should discuss first with typescript compiler developers.
EDIT: HTML inline TS Error handling and inteli sense is on its way in https://github.com/Polymer/polymer-analyzer/issues/387
But I need some extra approval or solution for transpiling example.ts.html to example.html For me tsc --html would make the most sense to do that part in the command line.
tsc --html would transpile example.ts.html to example.html with the script contents and script type replaced.
filename: example.ts.html
<link rel="import" href="../polymer/polymer-element.html">
<dom-module id="hello-world">
<template>
<style>
:host {
display: block;
box-sizing: border-box;
border: 1px solid red;
margin-top: 10px;
padding: 0px 5px;
}
</style>
<p>Test <slot></slot></p>
</template>
<script type="ts/module">
class HelloWorld extends Polymer.Element {
_hello: string = 'Hello World'
static get is() {
let test: string = 'test intelli'
test.toUpperCase()
return 'hello-world';
}
static get config() {
return {};
}
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
}
}
customElements.define(HelloWorld.is, HelloWorld);
</script>
</dom-module>EDIT: Note I am also looking into how close ES20XX syntax and typescript syntax are going to get that a future browser can just ignore all the typing syntax and read <script type="ts/module"> just like ES20XX javascript :) The browser doesn't need to look at the typings at all, just be smart enough to ignore typings that's it. If the two syntaxes matches close enough that can't be much to ask for browser vendors and the ECMA262 community right?