TypeScriptへの移行。長いモジュールパターンを部分的に分割する方法

Question

一部のJSコードをTypeScriptに移行しようとしています。 Revealing Module Patternsとして書かれたいくつかの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の変数にアクセスする必要があります。

この種の機能を実現するにはどうすればよいでしょうか？理想的には、main.tsファイルに取り込むことができる個々の機能のために、より小さなファイル.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

あなたがexport..fromに見て、main.tsにこのような何かを行うことができ、他のファイルからのモジュールを結合したい場合は：あなたが実行されていないので 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