Utilizing TypeScript to import and export modules under a single namespace

Have a look at this query that's quite similar to mine: https://github.com/Microsoft/TypeScript/issues/4529

Consider the following code snippet:

//exported imports
export {ISumanOpts, IGlobalSumanObj} from 'suman-types/dts/global';
export {ITestCaseParam} from 'suman-types/dts/test-suite';
export {IHookParam} from 'suman-types/dts/test-suite';
export {IDescribeFn} from 'suman-types/dts/describe';
export {ItFn, ITestDataObj} from 'suman-types/dts/it';
export {IBeforeFn} from 'suman-types/dts/before';
export {IBeforeEachFn} from 'suman-types/dts/before-each';
export {IAfterFn} from 'suman-types/dts/after';
export {IAfterEachFn} from 'suman-types/dts/after-each';
export {DefineObjectContext as IDefObjCtx} from "./test-suite-helpers/define-options-classes";
export {DefineObjectTestCase as IDefObjTestCase} from "./test-suite-helpers/define-options-classes";
export {DefineObjectAllHook as IDefObjAllHook} from "./test-suite-helpers/define-options-classes";
export {DefineObjectEachHook as IDefObjEachHook} from "./test-suite-helpers/define-options-classes";


export namespace s {

  // ! The goal is to consolidate all the above exported items into a namespace here

}

Is there a method to utilize namespace or module to export items as part of a namespace rather than exporting them individually?

I have tried something similar to this:

Therefore, I attempted converting them to imports and then storing them in a const like this:

However, it seems some of my declarations are interfaces, not classes, leading to the error message "only refers to a type, but is being used as a value here".

Answer №1

To consolidate all your namespace exports, you can create a file named s.ts. Here is an example of what this file might contain:

export {ISumanOpts, IGlobalSumanObj} from 'suman-types/dts/global';
export {ITestCaseParam} from 'suman-types/dts/test-suite';
export {IHookParam} from 'suman-types/dts/test-suite';
export {IDescribeFn} from 'suman-types/dts/describe';
export {ItFn, ITestDataObj} from 'suman-types/dts/it';
export {IBeforeFn} from 'suman-types/dts/before';
export {IBeforeEachFn} from 'suman-types/dts/before-each';
export {IAfterFn} from 'suman-types/dts/after';
export {IAfterEachFn} from 'suman-types/dts/after-each';
export {DefineObjectContext as IDefObjCtx} from "./test-suite-helpers/define-options-classes";
export {DefineObjectTestCase as IDefObjTestCase} from "./test-suite-helpers/define-options-classes";
export {DefineObjectAllHook as IDefObjAllHook} from "./test-suite-helpers/define-options-classes";
export {DefineObjectEachHook as IDefObjEachHook} from "./test-suite-helpers/define-options-classes";

In your module, you can simply import everything by using :

import * as s from './s'

export {s}

This will export both types and values under the namespace called s. To make use of these imports, you can do something like :

import {s} from 'your-module'

const anObject: s.ISumanOpts = {...}

Answer №2

My approach involves the following steps :

import * as Block from './block'
import * as FullNode from './full-node'
import * as ListOnChain from './list-on-chain'
import * as HashTools from './hash-tools'
import * as KeyValueStorage from './key-value-storage'
import * as SequenceStorage from './sequence-storage'
import * as SmartContract from './smart-contract'
import * as NodeBrowser from './node-browser'
import * as NetworkApi from './network-api'
import * as NetworkClientBrowserImpl from './network-client-browser-impl'
import * as NodeApi from './node-api'
import * as NodeImpl from './node-impl'
import * as NodeTransfer from './node-transfer'
import * as NodeNetworkClient from './node-network-client'
import * as WebsocketConnector from './websocket-connector'

export {
    Block,
    FullNode,
    ListOnChain,
    HashTools,
    KeyValueStorage,
    SequenceStorage,
    SmartContract,
    NodeBrowser,
    NetworkApi,
    NetworkClientBrowserImpl,
    NodeApi,
    NodeImpl,
    NodeTransfer,
    NodeNetworkClient,
    WebsocketConnector
}

After that, in a separate file, I can import them collectively with their individual namespaces intact :

import * as AllComponents from 'blockchain-js-core'

If importing them individually is preferred, it can be done like this :

import {
    Block,
    FullNode,
    ListOnChain,
    HashTools,
    KeyValueStorage,
    SequenceStorage,
    SmartContract,
    NodeBrowser,
    NetworkApi,
    NetworkClientBrowserImpl,
    NodeApi,
    NodeImpl,
    NodeTransfer,
    NodeNetworkClient,
    WebsocketConnector
} from 'blockchain-js-core'

For reference, an example can be accessed here : https://github.com/ltearno/blockchain-js/blob/master/blockchain-js-core/src/index.ts

Answer №3

Here is the code snippet I came up with:

import { JobEntity as _JobEntity } from '../types';

export namespace JobList {
  export type JobEntity = _JobEntity;
  export interface Props {
    ---------
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that selecting one checkbox does not automatically select the entire group of checkboxes

Here is the code I'm using to populate a list of checkboxes. <label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item.id"> <input type="checkbox" name="item_{{item.id}}" ng-value="{{item.id}}" ng-model="vm.selectedItem" /& ...

Error in Typescript index: iterating over properties of a typed object

My scenario involves an interface that extends multiple other interfaces from an external library: interface LabeledProps extends TextProps, ComponentProps { id: string; count: number; ... } In a different section of the codebase, there is an ...

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

I have been working on a project that involves implementing email and password authentication using Firebase. However, I encountered an error when the user submits their credentials: FirebaseError: Firebase: Error (auth/admin-restricted-operation). at ...

Using React with Typescript and ie18next to fetch translations from an external API

In the past, I have experience working with i18next to load translations from static json files. However, for my current project, I need to load all translations from an API. How can I achieve this? Additionally, how can I implement changing the translat ...

Angular 2+ encountering an internal server error (500) while executing an http.post request

Here is my service function: public postDetails(Details): Observable<any> { let cpHeaders = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: cpHeaders }); return this.htt ...

Issue with interface result: does not match type

Hey there! I've been working on creating an interface in TypeScript to achieve the desired return as shown below: { "field": "departament_name", "errors": [ "constraint": "O nome do departam ...

React is running smoothly, however, when attempting to call the React flow, an error is encountered: "Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not

Recently, I set up a React application using Next.js and TypeScript. Initially, everything was running smoothly with the command npm run dev. However, upon integrating the react flow library with npm install reactflow, I encountered an error when trying to ...

When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

Hey there! I'm trying to pass some string parameters to my URL to fetch information from an API. Everything seems fine, and when displayed in an alert, the URL looks exactly as it should (no [object, object] issue). var startDate = "2020-09-20"; var ...

Using the recommended Prettier plugin for TypeScript in ESLint is causing issues with the ability to use the override keyword

Software Versions: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0f190603041e2a5d445958445a">[email protected]</a> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7000021504041915023 ...

Client-side condition handling in Angular 2

How can I change the icon image on a block/unblock button based on the user's active status? For example, showing an unlock image when the user is active and vice versa. Image https://i.stack.imgur.com/aM0ff.png Html <link href="../../font-aw ...

Optimal approach to configuring Spring Boot and Angular for seamless communication with Facebook Marketing API

Currently, I am working on a Spring Boot backend application and incorporating the Facebook marketing SDK. For the frontend, I am utilizing Angular 10. Whenever I create a new page or campaign, my goal is to send the corresponding object back to the fronte ...

Having trouble implementing catchError in a unit test for an HttpInterceptor in Angular 11

I am facing challenges in completing a unit test for my HttpInterceptor. The interceptor serves as a global error handler and is set to trigger on catchError(httpResponseError). While the interceptor functions perfectly fine on my website, I am struggling ...

What is the method for utilizing Tuple elements as keys in a Mapped Type or template literal within typescript?

Is there a specific way to correctly type the following function in TypeScript? Assuming we have a function createMap() that requires: a prefix (e.g. foo) and a tuple of suffixes (e.g. ['a', 'b', 'c']) If we call createMap(& ...

The retrieval of cookies from the Response object is not possible with Typescript

While working on my google chrome extension, I implemented a post call that looks like this: public someapiCall(username: string, password: string) { var url = 'http://test.someTestServer.com/api/user/someApiCall'; let headers = new Hea ...

Angular device redirection allows you to automatically redirect users based on the device

Currently in my Angular project, I am attempting to dynamically redirect users based on their device type. For example, if the user is on a Web platform, they will be redirected to www.web.com. If they are on an Android device, they should go to www.androi ...

Is it possible for Visual Studio Code to create type declarations?

One of my tricks for quickly obtaining typings involves deriving them from actual data: https://i.stack.imgur.com/EPtMm.png I typically use a snippet like this: const ParcelFeatureTypeInstance = {"displayFieldName":"NAMECO","fieldAliases":{"PIN":"PIN / ...

Encountering an error stating "Argument of type 'X' is not assignable to parameter of type 'X' in the NextApiResponse within NextJS."

Here is the code snippet I am working with: type Data = { id: string; name: string; description: string; price: number; }; const FetchMeals = async (req: NextApiRequest, res: NextApiResponse<Data>) => { const response = await fetch( ...

What is preventing me from retrieving a value from a member function or method within a TypeScript class instance?

I am facing an issue with the FileInfo class that implements the IFileInfo interface. This class has an instance member function ext and a function getExt(). Within my component, there is a private method named openTempFolder() which makes an HTTP call to ...

Using a single Material Autocomplete input to handle two values within Angular

Looking to implement a search feature using Material's autocomplete that can filter by either user name or user ID. The current implementation is partially functional in this Stackblitz. When selecting a user name from the autocomplete options with a ...

Having difficulty utilizing defineProps in TypeScript

For some time now, I've been utilizing withDefaults and defineProps. Unfortunately, this setup has recently started failing, leaving me puzzled as to why! Here's a simple SFC example: <script setup lang = "ts"> const props ...