Mechanism for Generating Names in TypeScript

We are in the process of reorganizing an older package. To do this, we have begun transitioning from the original "export = module" syntax to "export default module". However, this change is causing issues with another part of our code that utilizes eval(). This is because the line "import module from 'module'" is being compiled as "module_1". The input for eval() comes from an external source, and we want to stick with using just "module" instead of the "module_1.default" format.

Could you shed some light on how this type of naming convention functions? Is there a way for us to utilize the original module name rather than the one generated during compilation? Or perhaps there is a method to retrieve the actual module name after compilation?

Thanks, Adam

Answer №1

Using the name generated by the compiler can be risky as it may change unexpectedly.

A Solution

One workaround is to do the following:

import myModule from 'module'
const module = myModule

The above code will compile to:

var module = module_1.default;

This way, you can safely use the variable module.

Benefits of using export default over export =

In the future, using export default will likely become the standard practice. This feature has been designed by ECMAScript to replace the current CommonJS usage. The default member is more versatile and efficient.

For example, if you need to export an object like this:

const myConfigObject = Object.freeze({
    dbHost: "",
    dbUser: "",
    // ...
})
export = myConfigObject

You can then import it using:

import * as myConfigObject from "./myConfigObject"

If you want to also export a helper function like toDSN, doing so within the configuration object may not be the most elegant solution. Instead, in ES6 you can do the following:

export default Object.freeze({
    dbHost: "",
    dbUser: "",
    // ...
})
export function toDSN(configObj) {
    return // ...
}

You can then import the default object:

import myConfigObject from "./myConfigObject"

... or import just toDSN:

import { toDSN } from "./myConfigObject"

... or import both:

import myConfigObject, { toDSN } from "./myConfigObject"

One limitation for Node.js users with the current setup is that they must specifically reference the default member. However, once Node.js supports ES6 modules, this won't be necessary anymore.

Reasons behind TS Compiler's Intermediate Variable Generation for Imports

The TS compiler generates intermediate variables for imports because this method is needed for the general case of ES6 modules. For instance, when importing multiple variables in ES6:

import myConfigObject, { toDSN } from "./myConfigObject"

In CommonJS or AMD, only single variable imports are allowed. So, the compiler creates an intermediate variable like myConfigObject_1. This allows access to myConfigObject through myConfigObject_1.default and toDSN through myConfigObject_1.toDSN.

I recommend reading this article on ES6 modules for further information.

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

Jasmine encountered an error while trying to compare the same string: 'Expected the values to match.'

I'm encountering an error message, despite verifying that the strings are identical: Expected { $$state : { status : 1, value : { customerNumber : 'customerNumber', name : 'name', userId : 'buId', customerType : 'ty ...

"Unresolved Class / Interface Error: The variable 's' is not defined

Exploring Typescript and Angular2 for the first time has been a learning experience, especially when it comes to classes and interfaces. Take a look at my interface: export interface Discount { codSco: string; desSco: string; } Now I'm atte ...

Is there a method for establishing a connection to oracledb using TypeScript ES6 class and module?

My goal is to implement an Oracle connection using Typescript ES6 Class module. I have successfully installed the @types/oracledb package and oracledb package, with the Jasmin framework used in my project. Below is the code I have implemented: import * ...

Receive the most recent information from Angular's service method

I offer a unique service. handler.ts import { Observable,of,Subject } from 'rxjs'; import { PlayerService } from "./../../core/services/player.service"; import { Injectable } from "@angular/core"; import { DeezerService } from "../services/deez ...

The maximize button mysteriously disappears in Ubuntu when using electron applications

I am encountering an issue with Ubuntu where the maximize screen button is not visible when compiling the Electron project. When I say "compile," I am referring to running electron build => ng build --configuration=dev && electron. My version of Electro ...

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Is there a way to customize the top, left, and width styling of the calendar? I'm struggling to find the right approach. I've been working with this date range picker. Despite trying to add classes and styles, I can't seem to update the app ...

Show the Array List in a left-to-right format

Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for reference. HTML <div> <h2 class="ylet-primary-500 alignleft">Sessions</h ...

Tips for implementing a feature in Angular 6 that enables an input box to accept both negative and positive values within the range of 0 to

HTML markup <input type="number" min="0" max="100" required placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl"> Implementing TypeScript validation this.rateControl = new FormControl("", [Validators.max(100) ...

When utilizing TypeScript, is it possible to indicate a different type for a null argument when calling a function?

I was intrigued by the behavior in TypeScript where line A compiles successfully while line B does not. function someFunction<T>(arg: T): void { console.log(arg) } someFunction<string>('some string') // this works fine someFunction ...

Setting Timezones in Typescript

I am working on a React application that fetches data in ISO8601 format, specifically timestamps from US/Chicago time like this example: "2020-09-01T06:05:00-05:00." I suspect it's US/Chicago because of the -05:00 indicating central daylight savings t ...

React's .map is not compatible with arrays of objects

I want to retrieve all products from my API. Here is the code snippet for fetching products from the API. The following code snippet is functioning properly: const heh = () => { products.map((p) => console.log(p.id)) } The issue ari ...

Tips for utilizing chodorowicz / ts-debounce effectively

Looking to utilize the debounce function provided by the ts-debounce package (available at here) in my typescript project. However, struggling to find a concrete example of its usage in typescript. Would greatly appreciate any help or guidance on this ma ...

I'm encountering an issue with my React 18 application using TypeScript: the module './App' cannot be found

Encountering an issue while attempting to update to react 18. I'm curious if this problem is related to my file types. I am using Typescript, so do both the app and index files need to have a .tsx extension? Both the app and index files are located ...

Creating dynamic templates with text interpolation in Vue 3 using the Composition API

I have a Component that requires a string property, as shown below: <script lang="ts" setup> const props = defineProps<{ transcription?: string; }>(); watch(() => props.transcription, (newTranscr ...

Step-by-step guide to initializing a project using React with Typescript and a functional server-side script

I am working on a project that involves a React Typescript app (created using Create React App). In this project, I need to have an executable script that can run alongside the React app. Both the app and the script are intended to only run on local machin ...

I am searching for a way to retrieve the event type of a svelte on:input event in TypeScript, but unfortunately, I am unable to locate it

In my Svelte input field, I have the following code: <input {type} {placeholder} on:input={(e) => emitChange(e)} class="pl-2 w-full h-full bg-sand border border-midnight dark:bg-midnight" /> This input triggers the fo ...

Module 'bcryptjs' could not be located

Recently, I added the @types/bcryptjs package to my Node.js project. Initially, there were no issues with importing it. However, when I attempted to use it in my code by including the line: console.log(bcrypt.hashSync(req.body.password)) I encountered an ...

Tips for setting up a personalized preview mode in Sanity Studio using Next.js

I am facing an issue displaying the preview mode because the URL must contain specific parameters such as "category" and "slug" (as shown in the image below). Here is the error URL with undefined parameters Therefore, I am unable to retrieve the paramete ...

Using Vite with a Chrome Extension Manifest version 3 throws the error "Import statement can only be used inside a module" when attempting to use inpage scripts

I recently developed a browser extension using the foundation of https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite project. Within the manifest file, I specified the background type as module background: { service_worker: "bac ...

The isMobile variable from useSettings is failing to update correctly when the window is resized in a Next

I’ve encountered an issue with determining the device type (mobile, tablet, or desktop) in my Next.js application. I’ve utilized the is-mobile npm package to identify the device type and passing this data through settings. However, the isMobile flag fa ...