Creating an object with mapped properties from enumeration values using Typescript

I am trying to find a way to automatically create an object with values computed during compilation using enumeration values and pre-defined function calls. The basic concept is to associate certain arguments of a function with keys. For example, consider the following:

enum LogLevel {
  error = 'error',
  warning = 'warning'
  info = 'info'
}

const log = (level: LogLevel, message: string) => {
  console.log(`Level: ${level}, Message: ${message}`);
}

I want to achieve something like this in terms of syntax:

const logger = {
  [level in LogLevel]: (msg: string) => log(level, msg)
}

This code snippet does not work as expected and results in a compilation failure (

A computed property name must be of type 'string', 'number', 'symbol', or 'any'
).

I would like this to be equivalent to:

const logger = {
  [LogLevel.error]: (msg: string) => log(LogLevel.error, msg),
  [LogLevel.warning]: (msg: string) => log(LogLevel.warning, msg),
  [LogLevel.info]: (msg: string) => log(LogLevel.info, msg)
}

This enables me to use it in this manner:

logger.error("Bad things happened")
logger.warn("Help me")

In my actual scenario, there are numerous elements in the enumeration, and I prefer not to manually update the object each time a new one is added. I understand that I can enforce a type constraint requiring all keys from the enumeration to be present in the type, using a similar syntax:

type Logger = {
  [level in LogLevel]: (msg: string) => void
}

However, since the values are redundant and essentially boilerplate, I aim to have them generated automatically.

Answer №1

It is important to note that once TypeScript types are compiled into JavaScript, they are removed. This means that you must dynamically generate your Logger.

const allLogLevels = ['error', 'warning', 'info'] as const;
type LogLevel = typeof allLogLevels[number]; // 'error' | 'warning' | 'info'

type Logger = {
  [level in LogLevel]: (msg: string) => void
}

const log = (level: LogLevel, message: string) => {
  console.log(`Level: ${level}, Message: ${message}`);
}

function createLogger() {
  const logger: Partial<Logger> = {};

  for (let key of allLogLevels) {
    logger[key] = (message: string) => log(key, message);
  }

  return logger as Logger;
}

// runtime
const logger = createLogger();

logger.error('test error.');
logger.warning('test warning.');
logger.info('test info.');

If you want to see this TypeScript example in action, visit the TypeScript Playground here.

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

Automatically fill in 'Edit' within an open Dialog using Angular Material

Can you pre-populate and edit a form in Angular Material's openDialog? The form is reactive. The main component has the user's URL with their ID. When the button is clicked, the openDialog should pop up with a populated form based on the passed I ...

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Is there a way to synchronize the min and max values of a ranged mat-slider with corresponding input fields? Currently, when I set numbers in the input fields, the slider updates correctly. However, when I use the slider to change the value of the input fi ...

Unidentified file: Error reading property 'filename'

I have a function that retrieves the file name. The file name is displayed in an input field, but the background color of the input field is only visible when a file is selected and the file name is populated there. I would like the background color to b ...

What is the proper way to manage the (ion select) OK Button?

Hey there, I'm working with an Ionic select directive and I need to customize the functionality of the 'OK' button. When I click on it, I want it to call a specific function. I'm aware of the (ionChange) event, but that only triggers w ...

Creating a React component that allows for pagination using data fetched from a

I have a Spring Boot endpoint that retrieves and lists items from a database: @RequestMapping(method = RequestMethod.GET, value = "/task", produces = MediaType.APPLICATION_JSON_VALUE) public ResponseEntity<?> processTask(@Valid TaskSearchP ...

Tips for tuning a MatTable in angular without using a filterPredicate

I'm facing a challenge with my MatTable component where I need to filter the data using previously stored values from user input. While I can verify that the values match the data, I'm unsure of how to apply filtering without relying on the filte ...

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

`How can I stop typescript from converting dynamic imports to require()?`

Currently, I am in the process of creating a Discord bot using discord.js. Interestingly, discord.js does not seem to be compatible with ESM modules, which has been causing some complications in my project. As a result, I have resorted to utilizing CommonJ ...

Promise<IDropdownOption[]> converted to <IDropdownOption[]>

I wrote a function to retrieve field values from my SPFx list: async getFieldOptions(){ const optionDrop: IDropdownOption[]= []; const variable: IEleccion = await sp.web.lists.getByTitle("Groups").fields.getByTitle("Sector").get ...

Is there a way to keep a button in a "pressed" state after it has been clicked?

Could someone kindly share the code with me? I am looking for a button that remains pressed after clicking it. At times, I feel embarrassed for struggling with seemingly simple tasks. Grateful for any guidance or solution provided by this community! Man ...

Creating a ref with Typescript and styled-components: A comprehensive guide

Trying to include a ref into a React component looks like this: const Dashboard: React.FC = () => { const [headerHeight, setHeaderHeight] = useState(0); const headerRef = React.createRef<HTMLInputElement>(); useEffect(() => { // @ts ...

Is it feasible to programmatically define the onClick action for an element within a ReactNode?

Let's discuss a function called addAlert that adds messages to an array for display as React Bootstrap alerts. While most alerts are simple text, there's one that comes with an "undo the last action" link. The challenge is that when this "undo" l ...

The issue arises when attempting to use the search feature in Ionic because friend.toLowerCase is not a valid function

I keep encountering an error message that says "friend.toLowerCase" is not a function when I use Ionic's search function. The unique aspect of my program is that instead of just a list of JSON items, I have a list with 5 properties per item, such as f ...

Is there a way to retrieve the ReturnType<T> for all methods within a class, even if the ReturnType<T> and its usage appear to be static?

After extensively reviewing the documentation on typescript at https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypet, I have come across two instances of ReturnType<T> mentioned. However, these instances appear to be statically ...

Using React for passing data

In the snippet found in "CameraPage.tsx", there is a logical function that is responsible for fetching camera images. This function simply makes a GET request to search for images stored in the backend, which will later be displayed on the FrontEnd. The op ...

Importing multiple features in Angular

[UPDATE]: Oops, my mind is a bit muddled from fatigue and I've mixed up two ideas which resulted in a rather meaningless question... Let's just blame it on the coffee! :P This may not be a pressing issue but more of a quest for knowledge... ...

Show the login form and accompanying controls in the center of the screen with Angular 6

Currently, I am working on developing a Reactive form using Angular 6. In my TypeScript file, I have successfully obtained the form instance along with form controls. The next step involves iterating through these form controls and displaying the user inpu ...

The absence of a semicolon in the non-null assertion is causing an

Within my code, I have a function that arranges a set of cards according to a specific coordinate system: const orderCardsInPage = (items: OrderItemType[], pageCards: CardType[]) => { return pageCards.sort((firstCard, secondCard) => { con ...

"Unfortunately, Azure Web Static Apps do not have the capability to access .env files that are prefixed with NEXT

Suppose I have an .env file set up like this: NEXT_PUBLIC_API_BASE_PATH = value1 While this .env is functioning correctly in my local environment, once deployed to Azure Web Static Apps and added to the configurationhttps://i.sstatic.net/eqiYn.png My app ...

Using a static class reference as a parameter in a generic type leads to a error

Before I submit a ticket on github, I want to double-check that I'm not making any mistakes. The issue should be clear enough: class A {} class B { static A = A; } function foo<T>(arg: T) {} // this is valid const b = new B.A; // "B" only ...