TypeScriptにプロパティの動的追加について教えてください。

Question

私はTypescriptでBackbone.Marionetteを使用しています。私はマリオネットの自分のタイプの記述を書いた。

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

私の問題はaddRegionsは活字体が知らないProviderSpa、にプロパティを追加することの副作用を有することであるので、それはプロパティ 『servicesRegionがバックボーン』タイプの値に存在しない」と文句を言い。 Marionette.Application '

タイプのインスタンスへのこれらの動的プロパティの追加について、TypeScriptにどのように伝えることができますか？

Answer 1

TypeScript型はコンパイル時に存在するため、ランタイムエフェクトはTypeScript型システムでは認識できません。コンパイル時にProviderSpaを適切に入力する必要があります。マリオネットは、アプリケーションのインターフェイスタイプを持っている場合、あなたも次のようなものを拡張することができ

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

：：おそらくそれを行うための最も簡単な方法は、あなたが行うことができますのでaddRegionsとservicesRegionタイプがありProviderSpaためのインタフェースを作るです

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

Answer 2

この例では、BackBone Marionetteの定義を使用しています。

オブジェクトに動的プロパティが追加されている場合は、宣言やインターフェイスをすべて作成するのではなく、ダイナミックなままにしたい場合があります。特に、宣言を新しいものに更新するオーバーヘッドプロパティと静的な型指定を実際に動的なプロパティにする利点は、私が支払うコストではありません。

この例では、角括弧構文を使用してプロパティにアクセスすると、宣言を必要とせずに型チェックを渡すことを意味します。重要なビットは最後の行にあります。

これは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

実際に、タイプスクリプトとマリオネットは手袋に合っています。
ここで重要な点は、動的プロパティの代わりにクラスの観点から考えることです。

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

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

更新：
私が投稿したブログ記事の一部1 TypeScript: Using Backbone.Marionette and RESTful WebAPI.

のことを念頭に置いて、あなたのコードは、上記の本になり