24

コンパイラエラーなしで、モジュール内でグローバル変数にアクセスできる便利な方法はありますか？つまり、以下で使用されるCANVAS_WIDTHはありますか？

    export class Bullet {


        x: number = 22;
        y: number = 22;

        constructor (speed: number) {
            this.xVelocity = speed;
        }

        inBounds() {
            return this.x >= 0 && this.x <= CANVAS_WIDTH &&
                this.y >= 0 && this.y <= CANVAS_HEIGHT;
        };
}
}
4

3 に答える 3

29

これらのプロパティを静的として定義する必要があります。そうすれば、次のように簡単にアクセスできます。

export class Game {
    static canvas: JQuery;
    static CANVAS_WIDTH: number;
    static CANVAS_HEIGHT: number;
    bullet: Bullet;

    constructor(canvasElem: JQuery) {
        Game.canvas = canvasElem;
        Game.CANVAS_WIDTH = Game.canvas.width();
        Game.CANVAS_HEIGHT = Game.canvas.height();
    }
}

export class Bullet {
    x: number = 22;
    y: number = 22;

    public inBounds() {
        // accessing static properties
        return this.x >= 0 && this.x <= Game.CANVAS_WIDTH && this.y >= 0 && this.y <= Game.CANVAS_HEIGHT;
    }
}

これは次のようにコンパイルされます。

define(["require", "exports"], function(require, exports) {
    var Game = (function () {
        function Game(canvasElem) {
            Game.canvas = canvasElem;
            Game.CANVAS_WIDTH = Game.canvas.width();
            Game.CANVAS_HEIGHT = Game.canvas.height();
        }
        return Game;
    })();
    exports.Game = Game;

    var Bullet = (function () {
        function Bullet() {
            this.x = 22;
            this.y = 22;
        }
        Bullet.prototype.inBounds = function () {
            // accessing static properties
            return this.x >= 0 && this.x <= Game.CANVAS_WIDTH && this.y >= 0 && this.y <= Game.CANVAS_HEIGHT;
        };
        return Bullet;
    })();
    exports.Bullet = Bullet;
});
//# sourceMappingURL=dhdh.js.map
于 2012-12-11T15:09:28.250 に答える
3

これは不自然な例ですが、グローバルスコープにプッシュしようとするのではなく、モジュールスコープを使用して、複数のクラスから使用される変数を囲むことができます。

module MyModule {
    var x: number = 5;

    export class FirstClass {
        doSomething() {
            x = 10;
        }
    }

    export class SecondClass {
        showSomething() {
            alert(x.toString());
        }
    }
}

var a = new MyModule.FirstClass();
a.doSomething();

var b = new MyModule.SecondClass();
b.showSomething();

ここでは、同じ変数を使用する複数のものに関する通常のルールがすべて適用されます。呼び出し元のコードに特定の順序のイベントを適用する必要はありません。

コンパイル先：

var MyModule;
(function (MyModule) {
    var x = 5;

    var FirstClass = (function () {
        function FirstClass() {
        }
        FirstClass.prototype.doSomething = function () {
            x = 10;
        };
        return FirstClass;
    })();
    MyModule.FirstClass = FirstClass;

    var SecondClass = (function () {
        function SecondClass() {
        }
        SecondClass.prototype.showSomething = function () {
            alert(x.toString());
        };
        return SecondClass;
    })();
    MyModule.SecondClass = SecondClass;
})(MyModule || (MyModule = {}));

var a = new MyModule.FirstClass();
a.doSomething();

var b = new MyModule.SecondClass();
b.showSomething();
于 2012-12-11T14:47:20.487 に答える
1

これを奨励したいかどうかはわかりませんが、OPの質問に文字通り答えます。

必要なものはすべてグローバルスコープに入れて、他の場所で参照できます。

たとえば、index.htmlに相当するものに次のように配置できます。

function logit(x, loc) {
  if (console && console.log) {
    console.log(loc, JSON.stringify(x, null, '  '));
  }
}

これで、少なくとも2つの方法のいずれかで、これをどこでも使用できます。

グローバルスコープを恨みます。

(window as any).logit(item, "some location")

Ewwww。

宣言を使用する

を使用して参照することもできますdeclare。

したがって、通常のTypeScriptファイルでは次のようになります。

declare const logit: (x: any, loc: string) => void;
// you could also just use
// declare const logit: any;

export default class MyClass {
  public handleIt(x: string) {
    logit(x, "MyClass.handleIt");
    // ... logic
  }
}

「index.html」だけでなく、どのファイルも、グローバルスコープに何かをプッシュするための出発点として公正なゲームであることに注意してください。たとえば、モジュールの読み込みが遅れると、問題が発生する可能性があることを覚えておいてください。

あなたの例

したがって、これら2つの値を必要に応じてグローバルに設定し（または、TypeScript以外のライブラリがそれを実行し、これがほぼ有効なユースケースになります）、次のようなことを行います...

declare let CANVAS_WIDTH: number; // maybe const, I don't know your use case.
declare let CANVAS_HEIGHT: number;

export class Bullet {
  x: number = 22;
  y: number = 22;

  constructor (speed: number) {
    this.xVelocity = speed;
  }

  inBounds() {
    return this.x >= 0 && this.x <= CANVAS_WIDTH &&
    this.y >= 0 && this.y <= CANVAS_HEIGHT;
  };
}

しかし、繰り返しになりますが、これは非常にアンチパターンであり、おそらくコードの臭いを示しています。Rajagopal웃が示唆するように、別のクラスに静的な値を設定したいとします。

于 2020-06-25T15:01:31.660 に答える