Question

是否有一种方便的方法可以在模块中访问全局变量，没有编译器错误，即下面使用的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;
        };
}
}

Answer 1

您需要将这些属性定义为静态，然后您可以像这样轻松地访问它，

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

Answer 2

这是一个人为的例子，但您可以使用模块范围来包含将从多个类中使用的变量，而不是尝试推向全局范围。

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();

Answer 3

我不确定是否要鼓励他们，但是要从字面上回答OP的问题：

您可以将所需的任何内容放入全局范围，然后在其他地方引用。

例如，您可以在index.html等效项中放置以下内容：

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

现在，您可以通过至少两种方式之一在任意位置使用此功能。

控制您的全局范围。

(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”，都是将内容推入全局范围的起点。请记住，如果您懒惰地加载模块，可能会遇到麻烦。

您的示例

因此，对您来说，可以根据需要全局设置这两个值（或者可能是非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;
  };
}

但是，这再次是高度的反模式，可能表示代码有异味。您想在另一个类as Rajagopal 웃 suggests上使用静态值。

打字稿全局变量

3 个答案:

您可以将所需的任何内容放入全局范围，然后在其他地方引用。

控制您的全局范围。

使用声明

您的示例