Làm thế nào để tôi nói với TypeScript về việc bổ sung động các thuộc tính?

Question

Tôi đang sử dụng Backbone.Marionette trong Typescript. Tôi đã viết mô tả kiểu của riêng tôi về Marionette.

var ProviderSpa = new Backbone.Marionette.Application(); 
ProviderSpa.addRegions({ 
    'servicesRegion': "#services-offered" 
}); 
ProviderSpa.servicesRegion.show(); 

Vấn đề của tôi là addRegions có một tác dụng phụ của việc thêm thuộc tính để ProviderSpa, mà nguyên cảo không biết và do đó nó than phiền rằng 'Thuộc tính 'servicesRegion' không tồn tại trên giá trị của loại' Backbone. Marionette.Application '.

Làm cách nào để tôi có thể cho TypeScript biết về các bổ sung thuộc tính động này vào một thể hiện của một loại?

Answer 1

Hiệu ứng thời gian chạy không thể được hệ thống loại TypeScript xem xét vì kiểu TypeScript chỉ tồn tại ở thời gian biên dịch. Bạn sẽ phải gõ ProviderSpa một cách thích hợp vào thời gian biên dịch. Có lẽ cách dễ nhất để làm điều đó là thực hiện một giao diện cho ProviderSpa có addRegions và các loại servicesRegion vì vậy bạn có thể làm:

interface IProviderSpa { servicesRegion: ...; addRegions: ...; }; 
var ProviderSpa = <IProviderSpa> new Backbone.Marionette.Application(); 

Nếu rối có một kiểu giao diện cho ứng dụng, bạn có thể thậm chí mở rộng đó như sau:

interface IProviderSpa extends Backbone.Marionette.IApplication { ... } 

Answer 2

Tôi đã sử dụng định nghĩa cắt giảm của BackBone Marionette cho ví dụ này.

Nếu bạn có nhiều thuộc tính động được thêm vào đối tượng, bạn có thể muốn để mọi thứ động hơn là cố gắng tạo khai báo hoặc giao diện cho tất cả - đặc biệt là chi phí lưu giữ cập nhật mới tài sản so với lợi ích của việc gõ tĩnh trên những gì thực sự là thuộc tính động không phải là chi phí tôi sẽ trả.

Trong ví dụ này, việc truy cập thuộc tính bằng cú pháp khung vuông có nghĩa là nó vượt qua kiểm tra loại mà không cần khai báo. Bit quan trọng nằm ở dòng cuối cùng.

Bạn có thể kiểm tra điều này trên TypeScript playground.

declare module Backbone { 
    export module Marionette { 
     export class Application { 
      addRegions(regions: any): void; 
     } 
    } 
} 

var servicesRegion = 'servicesRegion'; 
var ProviderSpa = new Backbone.Marionette.Application(); 
ProviderSpa.addRegions({ 
    servicesRegion: "#services-offered" 
}); 
ProviderSpa[servicesRegion].show(); 

Answer 3

Thực tế, TypeScript và Marionette vừa vặn trong tay.
Điều quan trọng ở đây là suy nghĩ về các lớp thay vì các thuộc tính động. Với ý nghĩ đó, mã của bạn trên trở thành này:

class ProviderSpa extends Marionette.Application { 
servicesRegion: Marionette.Region; 
constructor(options?: any) { 
    super(options); 
    this.addRegions({ servicesRegion: "#services-offered" }); 
} 
} 

var providerSpa = new ProviderSpa(); 
providerSpa.show(); 

Cập nhật:
Tôi vừa mới đăng tải một phần 1 của một bài viết blog trên TypeScript: Using Backbone.Marionette and RESTful WebAPI.