打字稿全局变量

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

我不确定我想鼓励这个，但要从字面上回答 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 上有静态值。

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

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

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