无法从 TypeScript 中的模块/命名空间导出/导入类答案

【问题标题】：Unable to export/import class from module/namespace in TypeScript无法从 TypeScript 中的模块/命名空间导出/导入类
【发布时间】：2018-02-21 01:56:56
【问题描述】：

我正在玩 TypeScript 和导出/导入。

我只是想要一个像C# 这样的文件结构。我想嵌套一个只包含一些常量字符串属性的助手类。这就是文件~/Scripts/Helper/UrlHelper.ts 的样子：

module Helper.UrlHelper {
    abstract class Controller {
        protected static readonly controllerName: string;
    }

    export abstract class Account extends Controller {
        static controllerName: string = "Account";

        static readonly loginGet: string = [Account.controllerName, "Login"].join("/");
        static readonly loginPost: string = [Account.controllerName, "Login"].join("/");
    }
}

我的目标是使用这些值，例如Helper.UrlHelper.Account.loginPost。但我没有让导入/导出工作。

我最后一次尝试是添加 export * from "./Helper/UrlHelper" 并使用导入 import {Account} from "../Helper/UrlHelper";

这会导致错误：

模块 '".../Scripts/Helper/UrlHelper"' 没有导出的成员 'Account'

我几乎尝试了 here 的所有内容，但没有任何效果。我做错了什么？

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

不要使用关键字module，只需将需要导入的成员导出到别处即可：

// Helper/UrlHelper.ts
abstract class Controller {
    protected static readonly controllerName: string;
}

export abstract class Account extends Controller {
    static controllerName: string = "Account";

    static readonly loginGet: string = [Account.controllerName, "Login"].join("/");
    static readonly loginPost: string = [Account.controllerName, "Login"].join("/");
}

然后，导出的成员Account就可以导入了：

// other-directory/other-file.ts
import { Account } from "../Helper/UrlHelper"

modules 的文档在这里：

https://www.typescriptlang.org/docs/handbook/modules.html

您也可以使用 命名空间，但它不是 ES6 标准。如果你真的想要命名空间，这里是文档：

另见：

【讨论】：

在这个答案之上，另一个有用的提示是，如果文件夹中有索引文件，导入也可以在文件夹级别工作，例如import { Account } from '../Helper'; 如果在 Helper 文件夹中有一个名为 index.ts 的文件。在索引文件中，您需要包含代码export * from './UrlHelper';。方便，然后只需要 1 行来导入所有助手。
@TimBJames 很有趣。但它在某处有描述吗？它是适用于所有协议（AMD、CommonJS、ES6）和所有捆绑器/加载器的强大解决方案吗？
我不是 100%，尽管stackoverflow.com/questions/44028806/… 这里有更多信息

【解决方案2】：

引用这个：https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html
建议您不要将类包装在模块中，因为这可能会造成不必要的混乱。
更好的选择是：

abstract class Controller { /* ... */ }
export abstract class Account extends Controller { /* ... */ }

这可以放在Helper 中，按照建议命名文件 UrlHelper.ts。
然后稍后当你想导入类时，你这样做：

import { Account } from "./Helper/UrlHelper";

【讨论】：