Question

我正在观看视频教程，并创建了一个新的打字稿项目。首先，我在根目录中创建了以下命名空间（utilityFunctions.ts）：

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文件如下（虽然我不认为linter与编译错误有任何关系）：

{
    "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}`);

您也可以完全删除/// <reference，因为导入时编译器可以找到.ts文件。

Answer 2

Typescript转换为javascript，由于javascript不是一种编译语言，你需要按顺序运行或加载所有的javascript文件，如果一个依赖于另一个。

命名空间基本上是javascript中的全局对象，因此需要在使用它们之前进行定义和加载。

在网页中，通常使用主html文件中的脚本标记来指定加载。

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

这将首先加载utilityFunction文件并定义对象/命名空间Utility，以便在app.js运行时它将具有对象Utility的可见性

我不确定WebStorm是如何工作的，但是您可能需要在项目中的某个位置定义加载的文件以及加载顺序。

Answer 3

在Visual Studio中快速轻松

拖放扩展名为.ts的文件从解决方案窗口移至编辑器，它将生成内联参考代码，如..

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

如何在Typescript项目中正确导入命名空间？

3 个答案: