Closure 编译器导出 Typescript 类和函数

Question

我试图在生成的打字稿上使用闭包编译器高级模式类但没有成功。有没有人完成过这样的事情。

打字稿Class

class TestData {
BlogName: string;
CacheTimeOut: number;
CopyrightHolder: string;

constructor(blogName: string, cacheTimeOut: number, copyrightHolder: string) {
    this.BlogName = blogName;
    this.CacheTimeOut = cacheTimeOut;
    this.CopyrightHolder = copyrightHolder;
}

addBlog(value: string): boolean {
    console.log('add blog');
    return true;
}

validate(): boolean {
    console.log('all valid');
    return true
}       
}

var myTestData = new TestData("name",22,"cpyright");

生成的代码

var TestData = (function () {
function TestData(blogName, cacheTimeOut, copyrightHolder) {
    this.BlogName = blogName;
    this.CacheTimeOut = cacheTimeOut;
    this.CopyrightHolder = copyrightHolder;
}
TestData.prototype.addBlog = function (value) {
    console.log('add blog');
    return true;
};
TestData.prototype.validate = function () {
    console.log('all valid');
    return true;
};
return TestData;

})();var myTestData = new TestData();

这会编译成

new function() {};

我知道我应该提供导出，所以我添加了

window['TestData'] = TestData;
window['TestData'].prototype['addBlog'] = TestData.prototype.addBlog
window['TestData'].prototype['validate'] = TestData.prototype.validate

闭包编译器高级编译的输出是

var a = function() {
  function b() {
  }
  b.prototype.a = function() {
    console.log("add blog");
    return !0;
  };
  b.prototype.b = function() {
    console.log("all valid");
    return !0;
  };
  return b;
}();
window.TestData = a;
window.TestData.prototype.addBlog = a.prototype.a;
window.TestData.prototype.validate = a.prototype.b;
new a;

如果您看到仍然没有剩余的构造函数代码。当我们将其添加到模块中时，情况会变得更糟。

我也试过使用@export of google闭包但没有成功

我看到几个插件可以生成基于打字稿的闭包编译器注释，但它们也不能生成正确的代码。

Thirdparty closure annotations generator

Answer 1

我运行对此进行了非常基本的测试。也许您更改了代码并且没有重新尝试。

如果您在问题中编译 TypeScript，它应该会产生以下结果 JavaScript：

var TestData = (function () {
    function TestData(blogName, cacheTimeOut, copyrightHolder) {
        this.BlogName = blogName;
        this.CacheTimeOut = cacheTimeOut;
        this.CopyrightHolder = copyrightHolder;
    }
    TestData.prototype.addBlog = function (value) {
        console.log('add blog');
        return true;
    };
    TestData.prototype.validate = function () {
        console.log('all valid');
        return true;
    };
    return TestData;
})();
var myTestData = new TestData("name", 22, "cpyright");

特别是，最后一行将参数传递给 TestData 构造函数。

使用 @compilation_level SIMPLE_OPTIMIZATIONS:

快速运行结果是（白色-space 是我的）

var TestData=function(){
    function a(a,b,c){
        this.BlogName=a;this.CacheTimeOut=b;this.CopyrightHolder=c
    }
    a.prototype.addBlog=function(a){console.log("add blog");return!0};
    a.prototype.validate=function(){
        console.log("all valid");return!0
    };
    return a
}(),myTestData=new TestData("name",22,"cpyright");

如果对部分代码使用高级优化，会过于激进。您需要为 Closure 编译器提供所有代码，以了解真正未使用的内容。

如果您的示例代表了您的所有代码，您会注意到构造函数以及所有三个属性（BlogName、CacheTimeOut 和 CopyrightHolder）实际上从未使用过，因此可以在不影响程序行为的情况下将其删除.

Answer 2

答案：优化的 noops 是 - 等等 - noops :)

解释：

如果您在这里使用您的 gen 代码 http://www.closure-compiler.appspot.com/home 使用 ADVANCED_OPTIMIZATIONS 它产生：

new function(){};

如果你添加 myTestData.addBlog("test"); 它产生：

(new (function(){function a(){}a.prototype.a=function(){console.log("add blog")};return a}())).a();

Closure 编译器导出 Typescript 类和函数

Closure compiler export Typescript classes and functions

javascript

typescript

minify

google-closure-compiler

bundling-and-minification

Closure 编译器导出 Typescript 类 和函数

Closure compiler export Typescript classes and functions

javascript

typescript

minify

google-closure-compiler

bundling-and-minification

Closure 编译器导出 Typescript 类和函数