Is it possible to export * as foo in typescript

Question

I can:

import * as foo from './foo'

But can't seem to export the same:

export * as foo from './foo'

This doesn't seem to work either...:

import * as fooImport from './foo';
export const foo = fooImport;

Any ideas?

--- UPDATE ---

What are you trying to achieve?

Basically, I am working on implementing an ngrx/store backend for my app. I want to organize my code like this:

app/core/
  index.ts
  viewer/
    index.ts
    viewer-actions.ts
    viewer-reducer.ts
  view-data/
    index.ts
    view-data-actions.ts
    view-data-reducer.ts

And I want to use my index.ts files to chain up all the exports from each subset (common paradigm).

However, I want to keep things namespaced. Each of my xxx-reducer.ts and xxx-actions.ts files have exports of the same name (reducer, ActionTypes, Actions, ...) so normal chaining would result in a name collision. What I am trying to do is allow for all of the exports from xxx-actions and xxx-reducer to be re-exported as xxx. This would allow me to:

import { viewer, viewerData } from './core';

...
    private viewer: Observable<viewer.Viewer>;
    private viewData: Observable<viewData.ViewData>;

    ngOnInit() {
        this.viewer = this.store.let(viewer.getViewer());
        this.viewData = this.store.let(viewData.getViewData());
    }

Instead of the more verbose:

import * as viewer from './core/viewer';
import * as viewerData from './core/viewer-data';

...

Thats the gist anyway...

Solution 1

TypeScript 3.8 or Later

See https://stackoverflow.com/a/59712387/1108891 for details.

Before TypeScript 3.7 or Earlier

Is it possible to export * as foo in typescript

Nope. You can, however, use a two step process:

src/core/index.ts

import * as Foo from "./foo";
import * as Bar from "./bar";

export {
    Foo,
    Bar,
}

src/index.ts

import { Foo, Bar } from "./core";

function FooBarBazBop() {
    Foo.Baz;
    Foo.Bop;
    Bar.Baz;
    Bar.Bop;
}

src/core/foo/index.ts and src/core/bar/index.ts

export * from "./baz";
export * from "./bop";

src/core/foo/baz.ts and src/core/bar/baz.ts

export class Baz {

}

src/core/foo/bop.ts and src/core/bar/bop.ts

export class Bop {

}

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

Solution 2

Since TypeScript 3.8 has been released you are able to add alias for your exports.

Example:

export * as utilities from "./utilities.js";

Ref: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html

Comments

[Lucas]

Yeah, i read that, and was trying to combine Import the entire module into a single variable, and use it to access the module exports with Re-exports

[Lucas]

Awesome... your update is exactly what i was looking for (even though it is 2 steps). Thank you.

[Yao Zhao]

ts 3.8 is already released: npmjs.com/package/typescript/v/3.8.2

[Mohit Vachhani]

I am still not able to use this. My system is installed with typescript 3.8.3.

[Admin]

This seems like a missing feature. Why won't it work? Are they trying to maintain compatibility with ESNext?

[Shaun Luttin]

@rakim Yes. They are trying to maintain compatibility with ESNext. That is a fundamental goal of TypeScript.

[holmberd]

There is a draft up for it in ECMAScript 2021. developer.mozilla.org/en-US/docs/web/javascript/reference/…

[mesqueeb]

Me neither. : (

[vbraun]

TS38 does support it, but webpack does not: github.com/webpack/webpack/issues/10460. If you set module to "es2015" in tsconfig.json then it will be downleveled to something webpack currently supports

[tremby]

It seems this is no longer accurate; see Przemek's answer.

[GorvGoyl]

is it possible to export selected functions from current file under some name like utilities without using namespaces?