Câu hỏi Polymer và TypeScript [đóng]


Tôi đã cố gắng mà không thành công khi triển khai một thành phần web tích hợp Polymer và TypeScript. Có ai biết tôi có thể xem mẫu ở đâu không? Có một thay thế cho Polymer? Cảm ơn


8
2018-05-19 08:19


gốc




Các câu trả lời:


Tôi đã đưa ra một giải pháp ... có lẽ không phải là giải pháp tốt nhất nhưng ít nhất là loại giải pháp làm việc. Vẫn cần phải nghiên cứu sâu hơn về điều này.

HTML phần tử tùy chỉnh:

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

tệp bản ghi của tôi (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;
    }
})

và cuối cùng, javascript được tạo bởi TypeScript:

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

Và với điều này nó hoạt động và tôi thậm chí có thể gỡ lỗi trong Firefox hoặc Chrome. Hãy xem liệu tôi có trở lại bước này không ... Hy vọng điều này sẽ giúp những kẻ khác.

Cuối cùng tôi đã suy nghĩ quá nhiều ... và quên điều quan trọng nhất: TypeScript là JavaScript LoL

== gần như quên mẫu Pyramid của tôi:

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

Tuyệt vời ... Polymer + TypeScript + Python


7
2018-05-19 22:49



Cũng nên xem xét thêm tệp polymer.d.ts để bạn không cần phải thực hiện var polymer = window['Polymer']; kinh doanh. Ví dụ: var Polymer : (name:string, attributes?:{[fieldName: string]: any})=>void; - Peter Burns
Lời khuyên tốt đẹp, cảm ơn - Rui Lima
Hãy xem xét việc sử dụng cờ --noImplicitAny để tsc-- Khi @PeterBurns chỉ ra, var polymer = window ['Polymer']; kết thúc với polymer là loại bất kỳ, mà cung cấp cho bạn không có loại bảo vệ nào. Thậm chí nếu bạn không muốn loại đầy đủ tất cả các Polymer, bắt đầu với một giao diện Polymer cơ bản mà bạn thêm vào khi bạn đi sẽ là một khởi đầu tuyệt vời. - blast_hardcheese