Exporting symbols within the same namespace from multiple files in a TypeScript project

Question

Exporting symbols within the same namespace from multiple files in a TypeScript project

I have a typescript module and I am looking to define symbols within the 'aaa' namespace from multiple files.

Here is an example of what my code looks like:

a.ts:

export namespace aaa {
  export const a = "a";
}

b.ts:

export namespace aaa {
  export const b = "b";
}

index.ts:

export * from "./a";
export * from "./b";

However, when I try to compile my code, I receive the following warning in the second line of index.ts:

TS2308: Module "./b" has already exported a member named 'aaa'. Consider 
explicitly re-exporting to resolve the ambiguity.

My question is, how can I correctly define symbols within the same namespace across multiple files and then export them all under index.ts?

typescript npm module namespaces export

Answer 1

Answer №1

To consolidate the modules and their individual aaa namespaces, you can utilize the spread syntax.

index.ts

import * as A from "./a";
import * as B from "./b";
export default { ...A.aaa, ...B.aaa };

// or if you prefer a named export
export const aaa = { ...A.aaa, ...B.aaa };

someotherfile.ts

import aaa from "aaa"

const A = aaa.A

It is important to note that the spread syntax performs a shallow merge, meaning that any conflicting declarations between a.ts and b.ts will prioritize b.ts's declaration.

a.ts

export namespace aaa {
  export const foo = "foo";
}

b.ts

export namespace aaa {
  export const foo = "bar";
}

-> someotherfile.ts

import aaa from "aaa"

const A = aaa.foo

console.log(A) // -> 'bar'

Answer 2

To consolidate the modules and their individual aaa namespaces, you can utilize the spread syntax.

index.ts

import * as A from "./a";
import * as B from "./b";
export default { ...A.aaa, ...B.aaa };

// or if you prefer a named export
export const aaa = { ...A.aaa, ...B.aaa };

someotherfile.ts

import aaa from "aaa"

const A = aaa.A

It is important to note that the spread syntax performs a shallow merge, meaning that any conflicting declarations between a.ts and b.ts will prioritize b.ts's declaration.

a.ts

export namespace aaa {
  export const foo = "foo";
}

b.ts

export namespace aaa {
  export const foo = "bar";
}

-> someotherfile.ts

import aaa from "aaa"

const A = aaa.foo

console.log(A) // -> 'bar'

Exporting symbols within the same namespace from multiple files in a TypeScript project

Answer №1

Similar questions

Exploring the world of node modules and long-term support events

How can we efficiently link data to custom objects (models) within a different class while fetching data from the server using the http.get() method in Angular CLI?

The Redux Toolkit slice and TypeScript were not in agreement: it was expecting 0 arguments, but received

Select numerous files and conveniently delete them using the angular delete button

Handlebar files are not compatible with Typescript loading capabilities

Exploring depths with Typescript recursion

Issue with applying the React Material UI ThemeProvider

I am having trouble getting the "npm run build" command to work properly on my React app project

Understanding how to use TypeScript modules with system exports in the browser using systemjs

Encountering a problem during the installation of angular-route.d.ts

Instructions on how to dynamically show specific text within a reusable component by utilizing React and JavaScript

Delete a specific element from an array using a specified criteria

Azure DevOps NPM step

Encounter an error message "Expected 0 type arguments, but received 1.ts(2558)" while utilizing useContext within a TypeScript setting

Tips for picking out a particular item from a list of child elements

Just acquired npm package: The process of including a bearer token in a POST request

What is the reason for recursion not producing a new object as output?

Ways to define an interface that can accommodate various interfaces with a specific structure

Getting parameter names (or retrieving arguments as an object) within a method decorator in TypeScript: What you need to know

The power of Vue reactivity in action with Typescript classes