[解決済み] タイプスクリプト。2つのクラスを拡張するには?
質問
PIXIクラス(2D WebGlレンダラライブラリ)を拡張するクラス間で、時間を節約して共通のコードを再利用したいのです。
オブジェクトインターフェイスです。
module Game.Core {
export interface IObject {}
export interface IManagedObject extends IObject{
getKeyInManager(key: string): string;
setKeyInManager(key: string): IObject;
}
}
私の問題は
getKeyInManager
と
setKeyInManager
は変更しないので、重複しないように再利用したいのですが、その実装を紹介します。
export class ObjectThatShouldAlsoBeExtended{
private _keyInManager: string;
public getKeyInManager(key: string): string{
return this._keyInManager;
}
public setKeyInManager(key: string): DisplayObject{
this._keyInManager = key;
return this;
}
}
私がやりたいことは、自動的に
Manager.add()
を通して、オブジェクトを参照するためにマネージャで使用されるキー
内部
プロパティにあるオブジェクト自身
_keyInManager
.
では、Textureを使った例を見てみましょう。ここでは
TextureManager
module Game.Managers {
export class TextureManager extends Game.Managers.Manager {
public createFromLocalImage(name: string, relativePath: string): Game.Core.Texture{
return this.add(name, Game.Core.Texture.fromImage("/" + relativePath)).get(name);
}
}
}
をすると
this.add()
を実行するとき、私は
Game.Managers.Manager
add()
メソッドによって返されたオブジェクトに存在するメソッドを呼び出したい。
Game.Core.Texture.fromImage("/" + relativePath)
. このオブジェクトは、この例では
Texture
:
module Game.Core {
// I must extend PIXI.Texture, but I need to inject the methods in IManagedObject.
export class Texture extends PIXI.Texture {
}
}
私が知っているのは
IManagedObject
はインターフェースであり、実装を含むことができないことは知っていますが、クラス
ObjectThatShouldAlsoBeExtended
の中に
Texture
クラスの中にあります。同じプロセスが
Sprite
,
TilingSprite
,
Layer
などがあります。
私はここで経験豊富なTypeScriptのフィードバック/アドバイスが必要です、それはそれを行うことが可能でなければなりませんが、その時点で1つしか可能でないので、複数の拡張によってではなく、私は他の解決策を見つけられませんでした。
どのように解決するのですか?
TypeScriptにはあまり知られていない機能として、Mixinを使用して再利用可能な小さなオブジェクトを作成することができるものがあります。多重継承を使用して、これらをより大きなオブジェクトにまとめることができます (多重継承はクラスでは許可されませんが、ミキシンは許可されます。)
このテクニックを使って、ゲーム内の多くのクラス間で共通のコンポーネントを共有したり、ゲーム内の1つのクラスから多くのコンポーネントを再利用したりすることができると思います。
Mixinsの簡単なデモです...まず、混ぜたいフレーバーです。
class CanEat {
public eat() {
alert('Munch Munch.');
}
}
class CanSleep {
sleep() {
alert('Zzzzzzz.');
}
}
次に、Mixinを作成するためのマジックメソッド(これはプログラムのどこかで一度だけ必要です...)です。
function applyMixins(derivedCtor: any, baseCtors: any[]) {
baseCtors.forEach(baseCtor => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
if (name !== 'constructor') {
derivedCtor.prototype[name] = baseCtor.prototype[name];
}
});
});
}
そして、mixinフレーバーから多重継承されたクラスを作成することができます。
class Being implements CanEat, CanSleep {
eat: () => void;
sleep: () => void;
}
applyMixins (Being, [CanEat, CanSleep]);
このクラスには実際の実装がないことに注意してください。しかし、このクラスを使用すると、すべてが動作します。
var being = new Being();
// Zzzzzzz...
being.sleep();
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] なぜList<T>を継承しないのですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?