Polymer和TypeScript

Rui*_*ima 8 typescript

我一直在努力实现集成Polymer和TypeScript的Web组件.有谁知道我在哪里可以看到样品?聚合物有替代品吗?谢谢

Rui*_*ima 7

我想出了一个解决方案......也许不是最好的解决方案,但至少是一种有效的解决方案.仍需要对此进行更深入的调查.

自定义元素HTML:

<link rel="import" href="../polymer/bower_components/polymer/polymer.html"/>

<polymer-element name="my-element" constructor="MyElement5">
    <template>
        <span id="el"></span>
    </template>
    <script src="my-element.js"/>

</polymer-element>
Run Code Online (Sandbox Code Playgroud)

我的打字稿文件(my-element.ts):

class Owner{
    ownerinfo:string;
    constructor(public firstName:string, public age:number){
        this.ownerinfo = firstName + " " + age + " yo";
    }

}

var polymer = window['Polymer'];
polymer('my-element',{
    owner:new Owner('TheOwner', 100),
    ready:function(){
        this.$.el.textContent = this.owner.ownerinfo;
    }
})
Run Code Online (Sandbox Code Playgroud)

最后,TypeScript生成的javascript:

var Owner = (function () {
    function Owner(firstName, age) {
        this.firstName = firstName;
        this.age = age;
        this.ownerinfo = firstName + " " + age + " yo";
    }
    return Owner;
})();

var polymer = window['Polymer'];
polymer('my-element', {
    owner: new Owner('TheOwner', 100),
    ready: function () {
        this.$.el.textContent = this.owner.ownerinfo;
    }
});
//# sourceMappingURL=my-element.js.map
Run Code Online (Sandbox Code Playgroud)

有了它,它可以工作,我甚至可以在Firefox或Chrome中调试.让我们来看看我是否有一些退步...希望这有助于其他人.

最后我想的太多了......忘了最重要的:TypeScript是JavaScript LoL

==差点忘了我的金字塔模板:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="${request.static_url('my_project:static/polymer/bower_components/platform/platform.js')}"/>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

    <!-- Custom webcomponents -->
    <link rel="import" href="${request.static_url('my_project:static/webcomponents/my-element.html')}"/>
    <!-- Bootstrap core CSS -->
    <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.static_url('my_project:static/theme.css')}" rel="stylesheet">
</head>
<body>
<!-- My Super Custom WebComponent -->
<my-element></my-element>
<script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

真棒......聚合物+ TypeScript + Python

  • 还要考虑添加一个polymer.d.ts文件,这样你就不需要做`var polymer = window ['Polymer'];`business.例如:`var Polymer :( name:string,attributes?:{[fieldName:string]:any})=> void;` (3认同)