3.7.2.7. TypeScript 支持

从 CUBA Release 6.9 开始,可以通过 Studio 搭建基于 TypeScript 的 Polymer 客户端脚手架代码。当创建 Polymer 客户端模块的时候,可以选择客户端的 polymer2-typescript preset。跟基本 JavaScript 版本的主要不同是:

组件类(Component classes)放在分开单独的 *.ts 文件

myapp-component.ts

  1. namespace myapp {
  2. const {customElement} = Polymer.decorators;
  3. @customElement('myapp-component')
  4. class MyappComponent extends Polymer.Element {
  5. }
  6. }

myapp-component.html

  1. <link rel="import" href="../bower_components/polymer/polymer.html">
  2. <link rel="import" href="./shared-styles.html">
  3. <dom-module id="myapp-component">
  4. <template>
  5. <!-- some html markup -->
  6. </template>
  7. <script src="myapp-component.js"></script>
  8. </dom-module>
构建过程额外增加了一个阶段 - TypeScript 编译

参考 package.jsonscripts 部分:
  1. {
  2. "scripts": {
  3. "build": "npm run compile && polymer build",
  4. "compile": "tsc",
  5. "watch": "tsc -w"
  6. }
  7. }

现在,在 polymer build 命令之前,需要先运行 npm run compile 命令,这个命令会有效的执行 TypeScript 编译(tsc)。



如果修改了组件类的代码,并且希望通过 Studio 的热部署使改动生效,需要先手动在 modules/front 目录运行 npm run watch 命令。