打字稿：導出命名空間中的所有函數

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";

但是 export {* as utils} 不起作用。 我可以將 Utils 的所有功能放到一個模塊“utils”中並導出它，但我不確定這是否是一個好習慣。 有沒有合適的方法來做到這一點？

Answer 1

import * from

不可以。即使在支持它們的語言中，全局導入也被認為是不好的做法。 （例如python 為什么“import *”不好？ ）

JavaScript / TypeScript 不支持它。 畢竟查看foo.bar並知道 bar 來自foo而不是bar並且不知道 bar 來自哪里（無需克隆和分析整個項目）非常有用。 🌹

Answer 2

自TC39/ecma 262以來，您可能需要的功能已被合並。 所以現在你可以像這樣導出模塊本身：

// module.ts

export interface Foo{
    bar: string;
}

export function A(){

}

export function B(){
    
}

export * as MyModule from './module';

然后像一個包含他自己上下文的模塊一樣使用它：

import {MyModule} from './module';

type MyType = MyModule.Foo;

MyModule.A();
MyModule.B();

在我看來，如果您使用它，它取決於 TS 版本和 webpack。 對我來說，它是 webpack 5 和 TS v4.1.2 效果很好。 尚未檢查搖樹，但看起來應該可以正常工作。

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 啟發的。