Javascript 迁移到TypeScript。如何将长模块模式分解为部分模式？

正在尝试将一些JS代码迁移到TypeScript。我们有许多JavaScript文件作为模块模式编写。以下是模式的简化：

var thing = (function() {
    var var1, var2;
    function init() {
        var1 = document.getElementById("var1");
        var2 = document.getElementById("var2");
        function func1() {
            // really long function that needs access to var1
        }
        function func2() {
            // really long function that needs access to var2
        }
    }
    // Our Bootstrap file fires this when ready
    BootStrap.DOMReady(init);
    return {
        Func1: func1,
        Func2: func2,
    };
})();

但是，当前的

func1

和

func2

都是非常长的函数，我们希望将它们“部分”到自己的

func1.ts

和

func2.ts

文件中，以便于维护。但是，他们需要访问init的vars

实现这种功能的最佳方式是什么？理想情况下，我们需要更小的

.ts

文件，用于单个函数，我们可以将其放入

main.ts

文件中

我们需要走进出口路线吗

我们是否可以通过三重斜杠指令实现这一点，并以某种方式保持作用域（不确定，因为内部函数需要保持作用域，而三重斜杠似乎需要在文件开始时定义）

甚至有可能这样做吗

var thing = (function() {
    function init() {
        /// <reference path="ts/func1.ts" />
        /// <reference path="ts/func2.ts" />
    }
    // Our Bootstrap file fires this when ready
    BootStrap.DOMReady(init);
    return {
        Func1: func1,
        Func2: func2,
    };
})();

var thing=（函数（）{
函数init（）{
/// 
/// 
}
//我们的引导文件在准备就绪时触发此命令
DOMReady（init）；
返回{
Func1:Func1，
Func2:Func2，
};
})();

如果要组合其他文件中的模块，可以查看export..from并在main.ts中执行类似操作：

从'/ts/Func1.ts'导出{Func1}；
从'/ts/Func2.ts'导出{Func2}；

由于您没有执行这些函数，所以可以执行类似的操作（这里使用commonJs模块系统）

如果您不能使用它，您可以引用顶部的文件，然后在运行之后在底部返回/导出它

/// <reference path="ts/func1.ts" />
/// <reference path="ts/func2.ts" />

var thing = (function() {
    function init() {
        // init logic
        func1.bind(this); func2.bind(this);
    }
    // Our Bootstrap file fires this when ready
    BootStrap.DOMReady(init);
})();

return { Func1: func1, Func2: func2 } // func1/2 has to imported from you external files

//
/// 
var thing=（函数（）{
函数init（）{
//初始化逻辑
func1.bind（这个）；func2.bind（这个）；
}
//我们的引导文件在准备就绪时触发此命令
DOMReady（init）；
})();
返回{Func1:Func1，Func2:Func2}//Func1/2必须从外部文件导入

是的，ES6导入/导出听起来是一个可行的解决方案：

// thing/init.js
import Bootstrap from 'bootstrap';
export var var1, var2;
function init() {
    var1 = document.getElementById("var1");
    var2 = document.getElementById("var2");
// Our Bootstrap file fires this when ready
BootStrap.DOMReady(init);

---

它到底在做什么？在那里定义函数根本没有任何作用-就像现在一样，你可以将函数移到与“var thing”相同的范围内，对吗？我更新了帖子，我没有提到我们想要“部分”的函数需要访问包含它们的函数范围内的东西。我们还希望确保

func1

和

func2

是私有函数。显示模块模式有助于实现这一点，但我们希望将内部函数分解为不同的文件进行维护。好的，但它们不是私有的，因为您正在返回它们。无论如何，您可以在init中执行“func1.bind（this）”，以确保他们可以访问该范围内的内容。但这不需要模块加载器在浏览器中工作吗？TypeScript默认支持节点模块，但对于浏览器中的功能，可能需要一个模块加载器（我希望避免，因此TypeScript），一个模块绑定器就足够了——如果您想将代码放在不同的文件中，就不能真正避免

// thing/init.js
import Bootstrap from 'bootstrap';
export var var1, var2;
function init() {
    var1 = document.getElementById("var1");
    var2 = document.getElementById("var2");
// Our Bootstrap file fires this when ready
BootStrap.DOMReady(init);

// thing/func1.js
import {var1} from './init';
export default function func1() {
    // really long function that needs access to var1
}

// thing/func2.js
import {var2} from './init';
export default function func2() {
    // really long function that needs access to var2
}

// thing.js
import func1 from 'thing/func1';
import func2 from 'thing/func2';
export {
    func1 as Func1,
    func2 as Func2
}
// you can also default-export an object but better shouldn't