Transforming TypeScript class of methods into a dictionary-style object

Question

Transforming TypeScript class of methods into a dictionary-style object

I've been working on a TypeScript project and am looking to improve the structure of some elements we're using. There is a file that's currently defined as a class, but I think it could be simplified down to a basic dictionary/POJO. Here's how it's currently set up:

export class AppSettings{
    public static get API(): string { return '/apis';}
    public static get API_COMMON(): string {return `${this.API}/common`;}
    public static get API_COMMON_VENDORS(): string {return `${this.API_COMMON}/vendors`;}
    //...redacted for brevity...
    //... return `${PREVIOUS_API_GET}/nextURL`....
}

The desired end result is to access the values through indexing on the object. (e.g.

AppSettings['domain']['endpoint']

)

In essence, our app has different "areas" or "domains" that perform similar functions but cater to varying use cases. For instance, we have an admin portal and a client-facing app, both dealing with the same types of data (invoices, batches, purchase orders, etc.). So, just to clarify, a practical example would look like

AppSettings['admin']['getBatches']

or

AppSettings['customer']['getBatches']

So, my question is: How can I go about refactoring this setup?

typescript object

Answer 1

Answer №1

To define functions or objects, you can do it like this:

const API = (): string => '/apis';
const API_COMMON = (): string => `${this.API}/common`;
const nested_obj = { prop: 'thing' };
....

After defining them, you can export all of them (optionally as the default too):

export {
  API,
  API_COMMON,
  nested_obj
  ...
};

When you import the object, you can use it as a dictionary or object.

Answer 2

To define functions or objects, you can do it like this:

const API = (): string => '/apis';
const API_COMMON = (): string => `${this.API}/common`;
const nested_obj = { prop: 'thing' };
....

After defining them, you can export all of them (optionally as the default too):

export {
  API,
  API_COMMON,
  nested_obj
  ...
};

When you import the object, you can use it as a dictionary or object.

Transforming TypeScript class of methods into a dictionary-style object

Answer №1

Similar questions

Ways to adjust the HTMLElement in index.html prior to sending the page back to the requester

The absence of a 'defaultValue' argument in Typescript React is causing an issue

Uncovering the Image Orientation in Angular: Is it Possible to Determine the Direction Post-view or Upon Retrieval from Database?

What is preventing TypeScript from identifying the type of a parent based on its child?

The specified instant cannot be located in 'moment' while attempting to import {Moment} from 'moment' module

Typescript encounters an error when attempting to access a property of an undefined

Troubleshooting the issue with integrating a user-defined Cordova plugin in Ionic 2 using TypeScript

Use the IONIC CAPACITOR application to send a 20-byte command to a BLE device

Error Encountered: Module Not Found - Ionic Version 2

Implement a function to delete an item from an array within a React object by utilizing the UseState hook

TypeScript error: Attempting to assign a value to this.x within the class constructor is not allowed

Angular 6: TypeError - The function you are trying to use is not recognized as a valid function, even though it should be

Displaying notification in Ionic 2

I'm perplexed as to why I'm receiving null for my context. Could it be due to a TypeError

Navigating through a complex array structure and having the capability to both search and filter its elements

Enable lazy loading to retrieve the current routed module

Having trouble finding the "make:migration" command in Adonis 5 - any suggestions?

I attempted to unsubscribe from an observable in Angular, but I encountered an error stating that the unsubscribe function does not exist

Implementing Server-Side API Response Caching in React-Query and Next JS

Double up on your calls to the subscribe function in Angular to ensure successful login