Polymer e TypeScript

Ho cercato senza successo di implementare un componente Web che integra Polymer e TypeScript. Qualcuno sa dove posso vedere un campione? Esiste un'alternativa a Polymer? GraziePolymer e TypeScript

fonte

2014-05-19 Rui Lima

Mi è venuta in mente una soluzione ... forse non la soluzione migliore ma almeno una specie di soluzione di lavoro. Ancora bisogno di indagare più a fondo su questo.

l'elemento personalizzato 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>

mio file dattiloscritto (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; 
    } 
})

e, infine, il codice JavaScript generato dalla dattiloscritto:

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

E con questo funziona e posso anche eseguire il debug in Firefox o Chrome. Vediamo se arrivo con un passo indietro su questo ... Spero che questo aiuti gli altri ragazzi.

Alla fine stavo pensando troppo ... e si è dimenticato il più importante: dattiloscritto è JavaScript LoL

== quasi dimenticato il mio modello Piramide:

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

Impressionante ... Polymer + TypeScript + Python

fonte

2014-05-19 22:49:04

Si consideri inoltre l'aggiunta di un file polymer.d.ts in modo che non sia necessario eseguire la 'var polymer = window ['Polymer'];' business. Ad esempio: 'var Polymer: (name: string, attributes?: {[FieldName: string]: any}) => void;' –

Consigli utili, grazie –

Considerare l'utilizzo del flag --noImplicitAny su tsc-- As @PeterBurns stava indicando, var polymer = window ['Polymer']; finisce con il polimero di tipo any, che non ti dà alcun tipo di protezione. Anche se non vuoi digitare completamente tutto Polymer, iniziare con un'interfaccia Polymer di base che aggiungi via via sarà un ottimo inizio. –

Polymer e TypeScript

risposta

Problemi correlati