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

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已经是一个模块，因此无需将其中的内容包装在命名空间中。

此外， using/// <reference ...仅用于编译器，但 node 不会使用它，因此它不知道在哪里找到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在导入时找到该文件。