遷移到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