Typescript:导出命名空间中的所有函数

Question

让我说我有一个打字稿文件Utils与一堆导出函数:

export function utilOne(){}
export function utilTwo(){}

我将index.d.ts文件添加到此文件夹中,我从Utils文件中导出*:

export * from './Utils';

在我的其他类中,我想通过utils命名空间访问函数utilOne和utilTwo,如:

utils.utilOne();

我知道我可以像这样导入它:

import * as utils from "./Utils";

但是,由于我将使用utils很多,我希望能够在命名空间中导出utils,例如:

export {* as utils} from './Utils';   // this doesn't work

然后使用:

import * from "./Utils";

但是导出{*as utils}不起作用.我可以把Utils的所有功能都放到模块"utils"中并导出它,但我不确定这是不是一个好习惯.有没有正确的方法来做到这一点？

Answer 1

自TC39/ecma 262起，您可能需要的功能已合并。\n所以现在您可以像这样导出模块本身：

\n

// module.ts\n\nexport interface Foo{\n    bar: string;\n}\n\nexport function A(){\n  // implementation\n}\n\nexport function B(){\n  // implementation\n}\n\nexport * as MyModule from \'./module\';\n

\n

然后像使用包含自己上下文的模块一样使用它：

\n

import { MyModule } from \'./module\';\n\ntype MyType = MyModule.Foo;\n\nMyModule.A();\nMyModule.B();\n

\n

在我看来，如果你使用它，这取决于 TS 版本和 Webpack。

\n

\n
• Webpack 5和 TS v4.1.2 运行良好。
\n
• Vite js - 也运行得很好。\n还没有检查树摇动，但看起来它应该运行得很好。
\n

\n

更新：

\n

在上面的情况下，一切都很好，但是，聚合模块会导出自身，如果您尝试用它来检查这一点madge --circular [directory]，则会显示存在循环依赖关系。

\n

因此，为了避免这种情况，我们可以遵循Mmdn web 文档并添加中间文件，例如barrel.ts

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.js\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 myModule\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 functionA.js\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 functionB.js\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 barrel.js\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n\n// -- myModule/functionA.js --\nexport function A(){\n  return \'this is module A\' \n}\n  \n// -- myModule/functionB.js --\nexport function B(){\n  return \'this is module B\' \n}\n\n// -- myModule/barrel.js --\nexport * from "./functionA.js";\nexport * from "./functionB.js";\n\n// -- myModule/index.js\nexport * as MyModule from \'./barrel.js\';\n\n// -- main.js --\nimport { MyModule } from "./myModule";\nconsole.log(MyModule.A); // this is module A\nconsole.log(MyModule.B); // this is module B\n

\n

Answer 2

进口于

不会.即使在支持它们的语言中,全球进口也被视为不良做法.(例如python 为什么"import*"不好？)

JavaScript/TypeScript不支持它.毕竟它非常有用,可以看到foo.bar并知道条形图来自foo而不是bar不知道哪里有条形图(没有克隆和分析整个项目).

Answer 3

除了注意事项之外，根据您的项目，可以利用一层间接来完成此导出。

./utils/internal/utils.ts

export function utilOne(){}
export function utilTwo(){}

./utils/utils.ts

import * as utils from './internal/utils';
export utils;

./test.ts

import { utils } from './utils/utils';

utils.utilOne();

注意事项：

如前所述，这是一种有问题的做法，并且对命名空间的渴望可能表明存在代码味道。它还可能会对您的库和由此产生的项目的树可摇动性产生负面影响。

注意：这个结构受到 RxJS 的启发。