生成冗余变量的Typescript

Typescript generating redundant variable

本文关键字：Typescript 变量 冗余      更新时间：2023-09-26

考虑以下Typescript代码：

module demoAppModule{
    'use strict';
    export module nest{
        export var hello = function () {
            alert('Hello!');
        };
    }
}
demoAppModule.nest.hello();

在传输后，我们有以下javascript代码：

var demoAppModule;
(function (demoAppModule) {
    'use strict';
    (function (nest) {
        nest.hello = function () {
            alert('Hello!');
        };
    })(demoAppModule.nest || (demoAppModule.nest = {}));
    var nest = demoAppModule.nest;
})(demoAppModule || (demoAppModule = {}));
demoAppModule.nest.hello();

为什么生成此行？它伤了我的眼睛。

var nest = demoAppModule.nest;

简短回答：需要在本地访问模块变量。例如

module demoAppModule{
    'use strict';
    export module nest{
        export var hello = function () {
            alert('Hello!');
        };
    }
    // The following would not be possible without that line 
    console.log(nest.hello);
}
demoAppModule.nest.hello();

更长的答案：它类似于在模块之前添加的var，例如注意var x:

// TypeScript 
module x{export var foo;}
// Generated JavaScript 
var x;
(function (x) {
    x.foo;
})(x || (x = {}));

但是，当您在模块内部+导出模块时，var需要添加到outermodule.innermodule，因此您不需要提前执行var innermodule。您将其添加到outermodule，然后创建一个本地变量指向innermodule，您可以在生成的javascript:中看到它

// Notice var here 
var demoAppModule;
(function (demoAppModule) {
    'use strict';
    // Notice no var here 
    (function (nest) {
        nest.hello = function () {
            alert('Hello!');
        };
    })(demoAppModule.nest || (demoAppModule.nest = {}));
    // Notice var assinged afterwards
    var nest = demoAppModule.nest;
    // The following would not be possible without that line
    console.log(nest.hello);
})(demoAppModule || (demoAppModule = {}));
demoAppModule.nest.hello();
相关文章：