晚上好。

我在从 Typescript 项目编译的 Javascript 输出中出现了一个 - 看似 - 废话 问题。这个问题看起来很复杂，但我会尽量让它简短明了。

我的名为“MyApp”的 Typescript 项目(完全面向对象，在 Visual Studio 2013 中开发)被设置为编译为单个输出文件(main.js，ECMAScript 5)，然后在浏览器中运行。没有使用模块加载软件(如 AMD)，我希望保持这种状态。项目中引用的所有 typescript 文件(.ts)都是自动编译的，无需使用 /// <reference path> 手动引用它们.

我有这个文件 (Score.ts)，深入到命名空间结构的一层:

App_Script/Score.ts

namespace MyApp.App_Script {
    export class Score {
        protected tracks: MyApp.App_Script.Entities.Track[];
        ...
    }
}

命名空间结构反射(reflect)了目录布局:

MyApp
|-- App_Script
|   |-- Entities
|   |   |-- Track.ts
|   |   |-- Note.ts
|   |   `-- ...
|   |-- Loader.ts
|   |-- Score.ts
|   `-- ...
`-- main.ts

Score类在 main.ts 文件中实例化(该文件可以被视为应用程序的单一“入口点”)，其内容包含在 MyApp 命名空间中:

ma​​in.ts

namespace MyApp {
    import Score = MyApp.App_Script.Score;

    var score: Score = new Score();

    score.init();
    ...
}

上面的代码(以及上面目录布局中显示的所有附加依赖项)编译没有问题，并且运行正确、流畅。但是，在 Score.ts 中，我希望 import Track 类以避免多次键入其完全限定名称:

App_Script/Score.ts

namespace MyApp.App_Script {
    import Track = MyApp.App_Script.Entities.Track;

    export class Score {
        protected tracks: Track[];
        ...
    }
}

此代码也可以编译，并且正确，不会出现任何错误，按预期创建指定的输出文件。在我的 Typescript 源文件中，一切似乎都很好，因为与 Typescript 相关的一切都完美无缺:没有报告语法错误，并且自动完成在导入的 Track 上正常工作。类，以及所有其他代码。

但是在浏览器中运行时，

main.js: Cannot read property 'Track' of undefined.

...这不足为奇，因为这是指定输出 Javascript 文件开头的令人憎恶的样子(这些是输出中非常的第一行):

ma​​in.js

var MyApp;
(function (MyApp) {
    var App_Script;
    (function (App_Script) {
        var Track = MyApp.App_Script.Entities.Track; // PLEASE LEAVE
        var Score = (function () {
            function Score() {
                this.tracks = [];

                for (var i = 0; i < 4; i++) {
                    // shouldn't this be "new MyApp.App_Script.Entities.Track()"?
                    // if I rewrite it manually, it works
                    this.tracks.push(new Track());
                }
            }
            return Score;
        })();
        App_Script.Score = Score;
    })(App_Script = MyApp.App_Script || (MyApp.App_Script = {}));
})(MyApp || (MyApp = {}));
...

Track 的定义实际上在编译输出的底部(当它应该在顶部时):

ma​​in.js

...
var MyApp;
(function (MyApp) {
    var App_Script;
    (function (App_Script) {
        var Entities;
        (function (Entities) {
            var Track = (function () {
                function Track() {
                    ...
                }
                return Track;
            })();
            Entities.Track = Track;
        })(Entities = App_Script.Entities || (App_Script.Entities = {}));
    })(App_Script = MyApp.App_Script || (MyApp.App_Script = {}));
})(MyApp|| (MyApp = {}));
...

这是我观察到的:如果你 import一个类，很好(分数是从 main.ts 导入的，没有问题)。如果你import命名空间中的类包含在其他地方导入的导出类，编译器会拒绝不可用的代码，而不会在此过程中报告任何错误。

这是 TypeScript 编译器中的错误，还是我遗漏了一些完全微不足道的东西？我不想使用模块加载系统，因为这似乎是编译器的问题，并且代码将在浏览器中运行。

海事组织，import应该在编译期间简单地将受影响的类名替换为它们的完全限定名称，而不是在输出的 Javascript 代码中引入额外的指令。

最佳答案

Is this a bug in the TypeScript compiler

没有

or is it just something completely trivial I am missing?

是

I do not wish to use a module loading system,

你可能应该这样做，因为你有文件排序问题

import should simply replace the affected class names with their fully qualified names during compilation, and not introduce additional instructions into the output Javascript code.

那将是错误的做法。考虑这样的代码:

namespace Z {
  export var A = 10;
}

namespace X {
  import Y = Z.A;
  namespace Q {
     let Z = { A: 20 };
     // If we replaced 'Y' with 'Z.A', as proposed, 'a' would be 20
     // when it should be 10
     let a = Y;
  }
}

这里的问题是 TypeScript 不会自动猜测您的文件应该按什么顺序连接。

解决方法是添加 /// <reference ...标记文件，以便编译器可以确定您想要的文件顺序，或者按照您希望它们出现在输出文件中的顺序在命令行上手动指定文件的顺序。

关于javascript - 编译输出中的 TypeScript 依赖项未按正确顺序解析，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34345145/