Executing Functions from Imported Modules in Typescript

Is there a way to dynamically call a method from my imported functions without hard-coding each function name in a switch statement? I'm looking for a solution like the following code:

import * as mathFn from './formula/math';

export function loadMethod(fnName: string, params: string){
   mathFn[fnName](params); 
}

I've attempted the following solution:

type SupportedMathFunction = keyof typeof mathFn;

export function loadMethod(fnName: SupportedMathFunction, params: string){
       mathFn[fnName](params); 
}

However, this approach is still giving errors.

Is there a way to retrieve methods from imported items using their names?

When compiling Typescript in VSCODE Terminal, I encountered the following Error:

SyntaxError: Unexpected token '?'
at wrapSafe (internal/modules/cjs/loader.js:1047:16)
at Module._compile (internal/modules/cjs/loader.js:1097:27)
at Module.m._compile (...\node_modules\ts-node\src\index.ts:1043:23)
at Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
at Object.require.extensions.<computed> [as .ts] (...\node_modules\ts-node\src\index.ts:1046:12)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)
at Module.require (internal/modules/cjs/loader.js:1019:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (...\src\functions.ts:11:1)

Update:

I resolved the error by upgrading Node from 12.16.3 to the latest version 14.15.5 and running npm update. Although, I faced Jasmine related issues, so I downgraded ts-node to version 8.10.2 based on this question Jasmine-ts throwing an error about package subpath, which ultimately allowed the code to work with my own solution:

type SupportedMathFunction = keyof typeof mathFn;
  
export function loadMethod(fnName: SupportedMathFunction, params: string){
   mathFn[fnName](params); 
}

Furthermore, @Lesiak's solution proved to be more convenient:

function loadMethod<K extends keyof typeof mathFn>(fnName: K ): typeof mathFn[K]{
  return mathFn[fnName]; 
}

Answer №1

Here is a solution to improve your code:

function getMathFunction<K extends keyof typeof mathFn>(funcName: K): typeof mathFn[K] {
       return mathFn[funcName];
}

This revised code addresses two key issues in your original implementation:

  • It includes the necessary function keyword.
  • Avoids undefined parameters.

Furthermore, this function now simply loads the specified math method without executing it immediately. It also ensures that each returned method has the correct type signature.

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

Typescript struggling to comprehend the conditional rendering flow

I am facing an issue with the code snippet below: import * as React from 'react' type ComponentConfig = [true, {name: string}] | [false, null] const useComponent = (check: boolean): ComponentConfig => { if (check) { return [true, {name ...

Using React-Router-Native to send an image as a parameter

I am encountering an issue while attempting to pass an image as a parameter in react-router-native and retrieve the data from location.state. Typically, I use the following code to display an image: import Icon from '../image/icon.png'; <Vie ...

What steps are involved in launching an outdated Angular project?

Tasked with reviving an old Angular client in my company, I found myself grappling with outdated files and missing configurations. The lack of package.json, package-lock.json, and angular.json added to the confusion, while the presence of node modules in t ...

Using ThreeJS to Apply Dual Materials to a Mesh Entity

With ThreeJS, it's possible to incorporate more than one material into an Object3D/Mesh as stated in the documentation. You can either utilize a single Material or an array of Material: Class declaration and constructor for Mesh TypeScript file (exce ...

Tips for including a dash or hyphen in an input field after two digits in Angular 4

Struggling to format the date of birth input with dashes manually when entered by the user. The desired output should resemble "08-18-2019," but I'm having difficulty achieving this. public dateOfBirth: { year: number; month: number; day: number }; ...

Leverage the compiler API to perform type inference

Exploring TypeScript's compiler API for basic type inference has proven to be a challenge with limited helpful information found in documentation or online searches. My goal is to create a function inferType that can determine and return the inferred ...

Angular 6 component experiencing issues with animation functionality

I've implemented a Notification feature using a Notification component that displays notifications at the top of the screen. The goal is to make these notifications fade in and out smoothly. In my NotificationService, there's an array that holds ...

Angular page not reflecting show/hide changes from checkbox

When the user clicks on the checkbox, I need to hide certain contents. Below is the code snippet: <input id="IsBlock" class="e-field e-input" type="checkbox" name="IsBlock" style="width: 100%" #check> To hide content based on the checkbo ...

Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

Looking for guidance on adding a custom Leaflet package to my Angular application called "leaflet-elevation". The package can be found at: https://github.com/Raruto/leaflet-elevation I have attempted to integrate it by running the command: npm i @raruto/ ...

Encountering an issue while attempting to initiate a nested array: "Cannot assign a value to an optional property access in the left-hand side of an assignment expression."

I am dealing with an object that contains nested arrays, structured like this: export class OrdenCompra { public id?: number, public insumos?: OrdenCompraInsumo[], } export class OrdenCompraInsumo { id?: number; traslados?: IImpuestoTraslado[]; } export ...

Exploring TypeScript in the world of Shopify Command Line Interface

Exploring the process of developing a Shopify app using Typescript starting with the shopify-app-cli boilerplate, which utilizes Koa for the server and Nextjs for the frontend in React JavaScript. see https://github.com/Shopify/shopify-app-cli Encounterin ...

Leveraging Fastify's preHandler middleware functionality

Implementing a middleware to validate user authentication before accessing the specified route. Encountering an issue where tokenService inside tokenController is showing as undefined when passing tokenController.authUser as a middleware. However, the met ...

Different ways to maintain the original syntax highlighting colors in JavaScript console

Upon closer inspection near the green arrows, you can see that the default console.log function colorizes values based on their type, distinguishing between string and number. In contrast, highlighted near the red arrows is my attempt at using Winston to ...

typescript code may not display a preview image

I recently came across a helpful link on Stack Overflow for converting an image to a byte array in Angular using TypeScript Convert an Image to byte array in Angular (typescript) However, I encountered an issue where the src attribute is not binding to t ...

Using a try block inside another try block to handle various errors is a common practice in JavaScript

In an effort to efficiently debug my code and identify the location of errors, I have implemented a try-catch within a try block. Here is a snippet of the code: for (const searchUrl of savedSearchUrls) { console.log("here"); // function will get ...

How to detect a click event in any area of an Angular2

Hey there, I'm new to typescript and angular 2 and I've encountered an error in my code. Can someone lend me a hand in fixing this? import { Component, HostListener } from '@angular/core' export class TooltipComponent { public sh ...

Using Angular 6 to Share Data Among Components through Services

I am facing an issue in my home component, which is a child of the Dashboard component. The object connectedUser injected in layoutService appears to be undefined in the home component (home userID & home connectedUser in home component logs); Is there ...

Receiving a null value when accessing process.env[serviceBus]

Currently, I am focusing on the backend side of a project. In my environment, there are multiple service bus URLs that I need to access dynamically. This is how my environment setup looks like: SB1 = 'Endpoint=link1' SB2 = 'Endpoint=link2&a ...

The proper method for referencing TypeScript compiled files with the outDir option

I am currently working on a simple app that consists of two .ts files. These files are compiled using the following tsconfig.js file: { "compilerOptions": { "target": "ES5", "module": "commonjs", "sourceMap": true, "emitDecoratorMetadata ...

When compiling to ES5, TypeScript fails to remove imports

I am working on a TypeScript file that utilizes the moment library, and I need to import moment for it to compile properly. However, after compilation, the import line is still present in the compiled file, which is causing issues on my web page. Here is ...