Typescriptプロジェクトで名前空間を正しくインポートするにはどうすればいいですか？

Question

私はビデオチュートリアルを見ており、私は新しいタイスクリプトプロジェクトを作成しました。 まず、私はルートディレクトリに作成された次の名前空間（utilityFunctions.ts）：

/// <reference path="utilityFunctions.ts" /> 


let fee: number = Utility.Fees.CalculateLateFee(10); 
console.log(`Fee: ${fee}`); 

：

namespace Utility { 

    export namespace Fees { 
     export function CalculateLateFee(daysLate: number): number { 
      return daysLate * .25; 
     } 
    } 

    export function MaxBooksAllowed(age: number): number { 
     if (age < 12){ 
      return 3; 
     } 
     else { 
      return 10; 
     } 
    } 

    //function that is not exported 
    //use it only inside the namespace 
    function privateFunc(): void { 
     console.log('This is private...'); 
    } 

} 

は、それから私は別のtypescriptファイル（app.ts）上記の名前空間のコードを使用することを作成しました次

/Users/Administrator/.nvm/versions/node/v6.5.0/bin/node /Users/Administrator/WebstormProjects/NamespaceDemo/app.js 
/Users/Administrator/WebstormProjects/NamespaceDemo/app.js:5 
var fee = Utility.Fees.CalculateLateFee(10); 
        ^

ReferenceError: Utility is not defined 
    at Object.<anonymous> (/Users/Administrator/WebstormProjects/NamespaceDemo/app.js:5:24) 
    at Module._compile (module.js:556:32) 
    at Object.Module._extensions..js (module.js:565:10) 
    at Module.load (module.js:473:32) 
    at tryModuleLoad (module.js:432:12) 
    at Function.Module._load (module.js:424:3) 
    at Module.runMain (module.js:590:10) 
    at run (bootstrap_node.js:394:7) 
    at startup (bootstrap_node.js:149:9) 
    at bootstrap_node.js:509:3 

Process finished with exit code 1 

マイtsconfig.jsonファイルされる：私は、私は次のエラーを取得しています（webstorm最新バージョンを使用して）app.jsファイルを実行

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es5", 
     "noImplicitAny": false, 
     "sourceMap": true 
    }, 
    "exclude": [ 
     "node_modules" 
    ] 
} 

と（私はリンターは、コンパイル・エラーとは何か持っていることはないと思うが）私のtslint.jsonファイルは以下の通りです：JavaScriptに

{ 
    "extends": "tslint:recommended", 

    "rules": { 
     "comment-format": [false, "check-space"], 
     "eofline": false, 
     "triple-equals": [false, "allow-null-check"], 
     "no-trailing-whitespace": false, 
     "one-line": false, 
     "no-empty": false, 
     "typedef-whitespace": false, 
     "whitespace": false, 
     "radix": false, 
     "no-consecutive-blank-lines": false, 
     "no-console": false, 
     "typedef": [true, 
      "variable-declaration", 
      "call-signature", 
      "parameter", 
      "property-declaration", 
      "member-variable-declaration" 
     ], 
     "quotemark": false, 
     "one-variable-per-declaration": false, 
     "max-line-length": 160, 
     "object-literal-sort-keys": false, 
     "trailing-comma": false, 
     "variable-name": [true, 
      "ban-keywords", 
      "check-format", 
      "allow-leading-underscore" 
     ] 
    } 

} 

Answer 1

あなたのutilityFunctions.tsはすでにモジュールであるため、名前空間内の内容をラップする必要はありません。

また、/// <reference ...を使用するのはコンパイラだけですが、ノードはそれを使用しないため、utilityFunctionsの場所はわかりません。
インポートする必要があります。

export namespace Fees { 
    export function CalculateLateFee(daysLate: number): number { 
     return daysLate * .25; 
    } 
} 

export function MaxBooksAllowed(age: number): number { 
    if (age < 12){ 
     return 3; 
    } 
    else { 
     return 10; 
    } 
} 

//function that is not exported 
//use it only inside the namespace 
function privateFunc(): void { 
    console.log('This is private...'); 
} 

とを：：

/// <reference path="utilityFunctions.ts" /> 

import * as Utility from "./utilityFunctions" 

let fee: number = Utility.Fees.CalculateLateFee(10); 
console.log(`Fee: ${fee}`); 

あなたはまた、完全にインポートするときに.tsファイルを見つけることができるコンパイラとして/// <referenceを削除することができます。ここ

ファイルがどのように見えるべきかです。

Answer 2

活字体transpilesを、およびJavaScript以来コンパイルされた言語ではないので、javascriptファイルが依存している場合は、すべてのjavascriptファイルを実行またはロードする必要があります。

名前空間は、基本的にjavascriptのグローバルオブジェクトです。したがって、名前空間は、使用する前に定義して読み込む必要があります。

ウェブページでは、読み込みは通常、メインのhtmlファイルのようなスクリプトタグで指定されます。

<script src="utilityFunction.js"></script> 
<script src="app.js"></script> 

これはapp.jsの実行時には、オブジェクトの可視性を持つことになりますようにオブジェクト/名前空間Utilityを最初utilityFunctionファイルをロードして定義しますUtility

私はWebStormがどのように動作するか本当にわからないんだけど、それはですどのファイルがどのような順序でロードされているかは、プロジェクトのどこかで定義する必要があります。

Answer 3

Visual Studioで

迅速かつ簡単

ドラッグアンドでファイルをドロップします。 エディタを解決ウィンドウからTSの拡張子は、それはあなたのフォルダ構造がどのように見えるかを確認すると便利かもしれません。..

/// <reference path="../../components/someclass.ts"/>