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:

https://i.sstatic.net/FILkj.png

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

https://i.sstatic.net/kJG36.png

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

How to Delete an Item from an Array in BehaviorSubject Using Angular/Typescript

I have encountered an issue while trying to delete a specific element from my array upon user click. Instead of removing the intended item only, it deletes all elements in the array. I attempted to use splice method on the dataService object, but I'm ...

Webpack does not support d3-tip in its current configuration

I'm having some trouble getting d3-tip to work with webpack while using TypeScript. Whenever I try to trigger mouseover events, I get an error saying "Uncaught TypeError: Cannot read property 'target' of null". This issue arises because th ...

Searching for true values in MongoDB using the query syntax can be challenging

I have a question that might be a bit embarrassing, but I need help with rendering a user search based on both location and date. Our profile object is structured like this: availability: { monday: { type: Boolean, default: false }, tuesday: { type ...

There was a parsing error due to encountering an unexpected reserved word 'interface' in the code, as flagged

I'm encountering an issue with my code when trying to utilize Props. The error message I'm receiving is "Parsing error: Unexpected reserved word 'interface'. (3:0)eslint". This project is being developed using next with TypeScript. Er ...

Take action once the Promise outside of the then block has been successfully completed

Presented below is the code snippet: function getPromise():Promise<any> { let p = new Promise<any>((resolve, reject) => { //some logical resolve(data); }); p.finally(()=>{ //I want do something when ou ...

How to leverage async/await within loops in Node.js for optimized performance and efficiency

Hey there, I'm working on my nodejs api where I need to fetch data inside a loop and then perform another loop to save data in a different table. Can anyone guide me on how to achieve this? Below is a snippet of what I have attempted so far without su ...

Are 'const' and 'let' interchangeable in Typescript?

Exploring AngularJS 2 and Typescript led me to create something using these technologies as a way to grasp the basics of Typescript. Through various sources, I delved into modules, Typescript concepts, with one particularly interesting topic discussing the ...

Issue with ESRI-Leaflet not displaying in an Angular Typescript environment due to a failure to recognize vector data

I am facing an issue where I cannot display the map or utilize the search functionality provided by esri-leafleft. Below is the code snippet from the typescript file: import { Component, OnInit } from '@angular/core'; import { Title, Meta } from ...

Searching for data based on specific keywords in Angular 2, rather than using a wildcard search, can be done by utilizing the key-in

My dropdown contains 100 values, and I am currently able to search for these values based on key input using wild search. However, I would like the dropdown to display values based on the specific alphabet that I enter first. HTML: <div class="col- ...

Custom React component - DataGrid

Just starting out in the world of React and attempting to create a custom component with parameters. I'm curious about the correct approach for achieving this. Here's my current code snippet - how do I properly pass Columns, ajax, and datasourc ...

How to style Angular Material Dropdowns: Trimming the Left and Right Sides using CSS

Seeking to customize Angular Material Select to resemble a basic dropdown. Even after applying the disableOptionCentering, the dropdown list options still expand from the left and right sides (refer to Current picture below). The desired look would involve ...

Issue with Angular 6 Share module functionality not functioning as expected

While creating my Angular 6 application, I encountered an issue with sharing a header across multiple pages. I tried including it but it doesn't seem to be working. Can anyone point out what I might be doing wrong? For a demonstration, you can visit . ...

Using 'cy.get' to locate elements in Cypress tutorial

Is there a way to search for one element, and if it's not found, search for another element? cy.get(@firstElement).or(@secondElement).click() Can I use a function similar to || in conditions for this scenario? ...

A guide on incorporating typings for d3-tip in TypeScript 2.0

Seeking to implement tooltips in my charts using the d3-tip library. After installing typings for d3-tip in Typescript 2.0: npm install @types/d3-tip --save The typings appear in my package.json: "dependencies": { "@types/d3": "^4.7.0", "@types/d3- ...

Triggering an event through a shared messaging service to update the content of a component

I'm looking for a simple example that will help me understand how I can change the message displayed in my component. I want to trigger a confirmation box with *ngIf and once I confirm the change, I want the original message to be replaced with a new ...

Guide on extracting just the key and its value from a Filter expression in a DynamoDB Query using Typescript

Presented here is a filter expression and Key Condition. The specific set of conditions are as follows: {"Age":{"eq":3},"Sex":{"eq":"MALE"}} const params: QueryCommandInput = { TableName: my_tab ...

Could someone teach me how to implement icon rotation in Vue.js using Vuetify?

I am currently working on adding a feature where the icon rotates when the button is clicked, moving from down to up and vice versa in a spinning motion. Here is the code I have so far: <template> <v-btn v-on:click="isShow = !isShow" ...

What is the best way to trigger a mat-menu to open with just one click, while also automatically closing any other open menus at

I've encountered an issue where if there are multiple menus in the header, opening a menu for the first time works fine. However, if a menu is already open and I try to open another one, it doesn't work as expected. It closes the previously opene ...

Utilizing Typescript to Incorporate Bable's Latest Feature: The 'Pipeline Operator'

Exploring the pipeline operator implementation in my Typescript project has been quite a journey. Leveraging babel as my trusty transpiler and Typescript as the vigilant type checker was the initial plan. The quest began with configuring babel to work sea ...

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...