Export multiple variables at once

Within TypeScript, I have Class1 defined in class.ts, along with some functions from helper.ts and variables from variables.ts:

For instance, the content of variables.ts is as follows:

export const test1 = 'test1';
export const test2 = 0;
export const test3 = 'test3';
export const test4 = 'test4';

Subsequently, using Webpack, I specify api.ts as the entry point to build a module.

api.ts

export { Class1 } from './class1';
export { helper1, helper2 } from './helper';
export * from './variables';

Within my web application, when working with JavaScript, I import necessary elements from this module. However, rather than importing each variable individually like so:

import { test1, test2, test3, test4 } from 'api';

I am interested to know if it is feasible to achieve an import structure similar to this:

import { variables } from 'api';
test1 = variables.test1;

or possibly something like:

import { variables.test1, variables.test3} from 'api';

What adjustments should be made in TypeScript to enable this functionality?

Answer №1

To streamline the process, I recommend importing all variables into a single module namespace object and then exporting that object:

import * as vars from './variables';
export { vars };

You can find more information on "module namespace objects" in this informative article published by Mozilla.

Answer №2

Simply create a container called data:

const data = {
  example1: 'example1',
  example2: 10,
  example3: 'example3',
  example4: 'example4'
};

Answer №3

Here is the solution provided by RXJS:

https://github.com/ReactiveX/rxjs/blob/master/src/internal/umd.ts

api.ts

export { Class1 } from './class1';
export { helper1, helper2 } from './helper';

import * as _variables from './variables';
export const variables = _variables;

Answer №4

Adding to Jack Bashfor's response, my recommendation would be to use export default

// data.js
export default const data = {
  value1: 'value1',
  value2: 0,
  value3: 'value3',
  value4: 'value4'
};


// script.js
import chosenName from 'data'
console.log(chosenName.value1);
// ...

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

The identifier 'id' is not recognized within the 'never' type in Angular

Hello there, I am currently working on a small project for a store website. You can find the project here. However, I have encountered an issue when trying to move items to the cart. Specifically, in the source code file app/components/product-list/produc ...

Utilizing the jQuery index for organizing JSON keys

Recently, I came across an interesting issue with a jQuery event handler in my code. When clicked, this specific event creates a JavaScript object based on a list of favorite links: $('#saveFavorites').on('click', function(){ a ...

Is it possible to perform a PHP redirect after the headers have been

I am encountering an issue with a function that needs to redirect the page once a variable is set. The challenge arises from the fact that this function is located at the bottom of the PHP page. As a result, I have already displayed a significant amount ...

Using the Backbone.js library to make secure requests over https

Currently, I am developing a single page application that involves using Backbone.js and Marionette on the front end, combined with Django and Tastypie on the back end. Recently, I successfully implemented an SSL certificate on the web server and configure ...

Increment numbers using XML elements

In my XML construction process, I start with a base XML and add elements like this: $(xml).find('PARENT').find('CHILDREN').each(function(i){ outputstr += '<lorem id="">' }) As the "parent" object appears mul ...

Steps for integrating a universal loader in Angular

My implementation of a global loader is as follows: In the CoreModule: router.events.pipe( filter(x => x instanceof NavigationStart) ).subscribe(() => loaderService.show()); router.events.pipe( filter(x => x instanceof NavigationEnd || x in ...

Dynamically altering the CSS4 variables in real time

I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...

Why are my AngularJs elements not appearing in the print dialog window?

Whenever I try to open the print Dialogue on a specific page, all I'm seeing is a blank screen. The majority of the content on this page consists of AngularJS elements. To trigger the print dialogue, I use the following code: <a href=""onclick="wi ...

Nonconforming Typescript argument specification

I've been struggling to pass this TypeScript array to a function. Despite trying multiple parameter types in an attempt to get it to compile, none of them have worked so far. Here is the array in question: var driverTally = [ { dr ...

Tips for removing the "" character from a JSON string using JavaScript

At my node js server, I am receiving a json string that has the following format: {\"gID\":1,\"sID\":18,\"T\":\"Parking\"} I added the "\" in the string because it was created in C and the \ is used to es ...

The disappearing act of Redux state after being added to a nested array

When attempting to update my redux state, I am facing an issue where the state disappears. My approach involves checking for a parentId - if one exists, I insert the payload into the parent's children array. However, if no parentId is provided, I simp ...

Is there a way to access a function or variable from within the scope of $(document)?

Whenever I attempt to utilize this.calculatePrice, it does not work and I am unable to access the external variable minTraveller from within the function. numberSpin(min: number, max: number) { $(document).on('click', '.number-spinner b ...

Ways to integrate a CSS file into XSLT

I have a CSS file that looks like this: .table_class1DeffCell { border-top-width : 1; border-left-width : 1; border-right-width : 1; border-bottom-width : 1; } .table_class11DeffCell { border-bottom-color : 000000; border-top-color : 000000; border-right- ...

Troubleshooting Problem: Difficulty accessing Controller in AngularJS Module

I am facing difficulties with communication between my application and a module that I have developed. Below is the AngularJS module that I created. (function (document, window) { 'use strict'; var piCart = angular.module('piCart& ...

invoke a pop-up window from a separate document

How can I make a modal window open from another file? I can't seem to figure out why it's not working. file 1: <template> <section class="header"> <div class="header-container"> <div cl ...

Errored Out: No content found in file_get_contents('php://input') following an ajax post

I've run into a dilemma and am seeking help. I recently encountered an issue where data sent to a PHP file through an AJAX function seemed to vanish when attempting to retrieve it in the PHP file. Strangely enough, a similar function I implemented yes ...

What is the best way to say hello using jQuery?

I need some assistance with a task that involves entering my name into an input field, clicking a button, and having an h1 tag display below the input saying Hello (my name)! Unfortunately, I am struggling to figure out how to achieve this. Below is the H ...

jQuery floating sidebar that dynamically adjusts position based on content overflow

I've come across an interesting scenario with a fiddle that I'm working on: http://jsfiddle.net/yFjtt/1/ The main concept is to allow users to scroll past the header and have the sidebar 'stick' in place as they continue scrolling down ...

What is the significance of using index 0 for caching an ID in jquery?

What is the reason behind using an index of 0 in the following code? var $one = $('#one')[0]; Is there a specific purpose for not just using var $one = $('#one'); ? SOURCE I came across the above code while researching about jQuery, ...

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...