Polymer和TypeScript

我一直在尝试没有成功实现集成Polymer和TypeScript的Web组件。有谁知道我在哪里可以看到样本？是否有替代聚合物？谢谢Polymer和TypeScript

2014-05-19 Rui Lima

我想出了一个解决方案......也许不是最好的解决方案，但至少有一种工作解决方案。仍需深入研究。

自定义元素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>

我的打字稿文件（我-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; 
    } 
})

最后，通过打字稿产生的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

有了它，它可以工作，我甚至可以在Firefox或Chrome中进行调试。让我们来看看我是否回过头来... 希望这可以帮助其他人。

在我想得太多了......结束，忘了最重要的：打字稿是JavaScript的英雄联盟

==几乎忘了我的金字塔模板：

<!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>

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

来源

2014-05-19 22:49:04

请考虑添加一个polymer.d.ts文件，以便您不需要执行'var polymer = window''''''';'business。例如：'var Polymer：（name：string，attributes？：{[fieldName：string]：any}）=> void;' –

好的建议，谢谢 –

考虑使用--noImplicitAny标志作为tsc-- As @PeterBurns指出，var polymer = window ['Polymer'];最后聚合物是任何类型的，这不会给你任何类型的保护。即使你不想完全键入所有的Polymer，从你添加的基本Polymer界面开始，这将是一个很好的开始。 –

Polymer和TypeScript

回答

相关问题