Problem with moving functions from one file to another file via export and import

Question

Problem with moving functions from one file to another file via export and import

I currently have the following file structure:

---utilities
-----index.ts
-----tools.ts
allfunctions.ts

Within the tools.ts file, I have defined several functions that I export using export const. One of them is the helloWorld function:

export const helloWorld = () => console.log('Hello World');

In the utilities/index.ts file, I've imported the tools file and exported it like this:

import * as toolsFunction from './tools';

export { toolsFunction }

Now in my allfunctions.ts file, I am trying to use the helloWorld function in the following way:

import { taskFunctions as Utility } from './utilities/';

taskFunctions.helloWorld();

Before compiling the code, everything works fine. However, when I try to compile, I encounter the following error message:

TypeError: Cannot read property 'helloWorld' of undefined

I'm not sure what mistake I might be making here. Could you provide some insight?

typescript

Answer 1

Answer №1

When using typescript's import to bring in a module, the syntax is as follows:

import * as myModule from './superModule'
myModule.doStuff()

or

import {doStuff} from './superModule'
doStuff()

or

import {doStuff as superFunction} from './superModule'
superFunction()

In this case, the issue arises because taskFunctions is not defined, and you should instead call your helloWorld function using Utility. Try :

import { toolsFunctions as Utility } from './utilities/';

Utility.helloWorld();

For further details, refer to https://www.typescriptlang.org/docs/handbook/modules.html

Answer 2

When using typescript's import to bring in a module, the syntax is as follows:

import * as myModule from './superModule'
myModule.doStuff()

or

import {doStuff} from './superModule'
doStuff()

or

import {doStuff as superFunction} from './superModule'
superFunction()

In this case, the issue arises because taskFunctions is not defined, and you should instead call your helloWorld function using Utility. Try :

import { toolsFunctions as Utility } from './utilities/';

Utility.helloWorld();

For further details, refer to https://www.typescriptlang.org/docs/handbook/modules.html

Answer 3

Answer №2

The reason for the issue is that you are not correctly invoking the helloWorld() function. The function is exported as toolsFunction, but you are trying to import it as taskFunctions in your allfunctions.ts. Additionally, you need to call the function using the new alias Utility. Your code should be updated as follows:

tools.ts

export const helloWorld = () => console.log('Hello World');

index.ts

import * as toolsFunction from './tools';

export { toolsFunction }

allfunctions.ts

import {toolsFunction as Utility} from './utilities/'

export {Utility};

usage in app.component.ts

import { Component } from '@angular/core';
import {Utility} from './allfunctions'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  constructor(){
    Utility.helloWorld();
  }
}

For a working demonstration, visit: https://stackblitz.com/edit/angular4-zzhcu5

Answer 4

The reason for the issue is that you are not correctly invoking the helloWorld() function. The function is exported as toolsFunction, but you are trying to import it as taskFunctions in your allfunctions.ts. Additionally, you need to call the function using the new alias Utility. Your code should be updated as follows:

tools.ts

export const helloWorld = () => console.log('Hello World');

index.ts

import * as toolsFunction from './tools';

export { toolsFunction }

allfunctions.ts

import {toolsFunction as Utility} from './utilities/'

export {Utility};

usage in app.component.ts

import { Component } from '@angular/core';
import {Utility} from './allfunctions'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  constructor(){
    Utility.helloWorld();
  }
}

For a working demonstration, visit: https://stackblitz.com/edit/angular4-zzhcu5

Problem with moving functions from one file to another file via export and import

Answer №1

Answer №2

Similar questions

When the down arrow key is pressed, the focus of the radio button is lost

"Upon submitting a form in React JS, the components will automatically trigger a

Typescript error in RxJS: Incorrect argument type used

Accessing properties for objects with map-like characteristics

Establishing the placement of map markers in Angular

What is the correct way to invoke a static TypeScript class function in JavaScript?

"Encountering difficulties while setting up an Angular project

Guide to implement editable columns in Angular 4 with a click functionality

What is the methodology for obtaining the setter property type in TypeScript?

Combine two arrays into one

Troubleshooting the lack of success in enhancing global scope within Typescript

Confirming changes to checkbox values in Angular 2 prior to updating

Incorporating interactive buttons within Leaflet popups

Error: The version of @ionic-native/[email protected] is not compatible with its sibling packages' peerDependencies

Error in Jest Testing: An unexpected character '@' was encountered

Choose to either push as a single object or as individual items

"Can you share a method to extract the value from a TextField component in a React hook-based Material-

What steps should I take to resolve the error message "ESLint encountered an issue determining the plugin '@typescript-eslint' uniquely"?

Try using ngFor within the insertAdjacentHTML method

Having trouble getting the styles property to work in the component metadata in Angular 2?