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

回答

相關問題