迁移到TypeScript。如何打破长揭示模块模式为部分？

Question

试图将一些JS代码迁移到TypeScript。我们有许多JavaScript文件被编写为Revealing Module Patterns。这里是一个减少的格局：

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的变量。

什么是实现这种功能的最佳方式？理想情况下，我们希望为个别功能提供更小的.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, 
    }; 
})(); 

Answer 1

如果你想在main.ts结合从其他文件模块可能会考虑export..from，做这样的事情：既然你不执行 export { Func1 } from './ts/func1.ts'; export { Func2 } from './ts/func2.ts';

https://www.typescriptlang.org/docs/handbook/modules.html

该功能你可以做这样的事情（这里使用CommonJS的模块系统）

import { func1 } from './ts/func1.ts'; 
import { func2 } from './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); 
})(); 

export { func1 as Func1, func2 as Func2 } 

，如果你不能，使用T帽子，你可以引用顶部的文件，并在东西运行后在底部返回/导出它。

/// <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 

Answer 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); 

// 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