如何在Typescript項目中正確導入名稱空間？

我正在看一個視頻教程，並且我創建了一個新的打字稿項目。首先我在根目錄中創建以下命名空間（utilityFunctions.ts）：如何在Typescript項目中正確導入名稱空間？

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...'); 
    } 

}

然後創建另一個打字稿文件（app.ts）使用上述命名空間的代碼：

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


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

當我運行app.js文件（使用webstorm最新版本）我收到以下錯誤：

/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文件如下：

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

而且我tslint.json文件如下（雖然我不認爲棉短絨有什麼用編譯錯誤）：

{ 
    "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" 
     ] 
    } 

}

來源

2016-09-13 skiabox

這可能是有益的，看看你的文件夾結構是什麼樣子。這可能是它無法找到該文件。我還沒有發現如何解決腳本標記的問題，但是您可能需要向您的tsconfig添加此編譯器選項「moduleResolution」：「node」我不確定，但這也可能會影響腳本標記解析。 –

Ok.Mystery解決了！我剛看了視頻的其餘部分，並得到了完全相同的錯誤。它是一個nodejs問題.NodeJS不接受多個文件中的命名空間（它只接受模塊 - 至少這是導師所說的），所以我必須將「outFile」這一行：「out.js」添加到我的tsconfig.json中，然後運行這個將所有項目的打字稿文件收集到一個JavaScript文件中的單個文件。 – skiabox

由於您的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}`);

您也可以徹底清除/// <reference，因爲編譯器導入時能找到.ts文件。

來源

2016-09-13 14:56:09

這是工作，但我還沒有到達教程中的模塊部分（這是在當前視頻之後），我也想知道作者如何設法使用這個命名空間語法（雖然他使用的是Visual Studio代碼）並得到他的代碼無誤地運行。 – skiabox

在我原來的帖子後查看我的評論。 – skiabox

打字稿transpiles到JavaScript和JavaScript的自不是一種編譯語言，你需要運行或加載所有的JavaScript文件，如果依賴另一個。

命名空間基本上是javascript中的全局對象，因此它們需要在使用之前進行定義和加載。

在網頁中，加載通常是在主html文件中用腳本標籤指定的。

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

這將首先加載utilityFunction文件和定義對象/名稱空間Utility使app.js運行時，它都會有對象的知名度Utility

我真的不知道WebStorm是如何工作的，但它是很可能你需要在你的項目的某個地方定義加載什麼文件和按什麼順序。

來源

2016-09-13 14:44:58

這個解決方案對於瀏覽器來說非常好。你可以在我原來的帖子下面發表的評論中找到這個問題的答案。 – skiabox

快速輕鬆在Visual Studio

拖放與文件。從溶液窗口TS擴展編輯器，它會生成內聯的參考代碼如..

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

來源

2017-06-29 18:03:42

如何在Typescript項目中正確導入名稱空間？

回答

相關問題