Typescript: export all functions in a namespace

Question

Lets say I have a typescript file Utils with a bunch of exported functions:

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

I added index.d.ts file to this folder where I export * from the Utils file:

export * from './Utils';

In my other classes I'd like to access functions utilOne and utilTwo via utils namespace, like:

utils.utilOne();

I know that I can import it like this:

import * as utils from "./Utils";

However, as I will be using utils a lot, I would like to be able to export utils in a namespace, something like:

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

and then use:

import * from "./Utils";

However the export {* as utils} doesn't work. I could put all the functions of Utils to a module "utils" and export it, but I am not sure if this is a good practice. Is there a proper way to do this?

Sergey Egorov · Answer 1 · 2022-05-30T12:47:42.343

Since TC39/ecma 262 the feature you probably need was merged. So now you can export the module itself like this:

// module.ts

export interface Foo{
    bar: string;
}

export function A(){

}

export function B(){
    
}

export * as MyModule from './module';

And then use it like a module that contains his own context:

import {MyModule} from './module';

type MyType = MyModule.Foo;

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

Seems to me it depends on TS version and webpack if you are using it. For me it's webpack 5 and TS v4.1.2 works good. Did not check tree-shaking yet, but looks it should work fine.

basarat · Accepted Answer · 2022-03-23T06:25:55.257

9

import * from

No. Global imports are considered bad practice even in languages that support them. (e.g. python Why is "import *" bad?)

JavaScript / TypeScript doesn't support it. After all its pretty useful to see foo.bar and know that bar is coming from foo instead of bar and having no clue where bar is coming from (without cloning and analyzing the whole project).

edited Mar 23 '22 at 06:25

answered Jul 03 '16 at 22:59

basarat

261,912
58
460
511

3

I think this is a good question other than the last line and worth answering despite the request for bad practice. They could just as easily have asked for the ability to do `import { utils } from './Utils'` I have a library made up of a bunch of files. I would like the exports from the library to be namespaced by file rather than all jammed together into a single module wide namespace. I believe this is the same as what the OP wants. – Micah Zoltu Jul 31 '19 at 12:30
That does not answer the question at all, it's even out of topic. The OP is exactly asking for obj like access to his modules and is asking about glob exports not imports. – melMass Mar 16 '22 at 15:52

score 5 · Answer 3 · answered Apr 27 '21 at 23:52

Caveats aside, depending on your project, one can accomplish this export utilizing a layer of indirection.

./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();

Caveats:

As noted, this is a questionable practice, and the desire to namespace may be indicative of a code-smell. It may also negatively impact the tree-shakability of your library and resulting projects.

Note: This structure is inspired by RxJS.

Typescript: export all functions in a namespace

3 Answers3

Linked