Create a class with additional attributes to support different types of options

Question

Create a class with additional attributes to support different types of options

I define a set of options represented by strings:

export type Category = 'people' | 'projects' | 'topics' | 'tools'

An index is declared as follows:

interface Entry {
  ...
}
type IPostEntryIndex = {
  [name in Category]: Entry
}

How can I create class properties that correspond to the category names?

const categories: Category[] = ['people', 'projects', 'topics', 'tools']

class PostEntryIndex implements IPostEntryIndex {
  // What needs to be included here so that `PostEntryIndex` has a property 
  // for each category listed in Category?

  constructor () {
    categories.map(cat => this[cat] = new Entry())
  }
}

Note: While I could explicitly declare the categories, I am seeking a more efficient solution that doesn't require manual updates when a new category is added. Keeping categories array aligned with Category would also be ideal. Perhaps utilizing an enum could help achieve this.

typescript

Answer 1

Answer №1

There isn't a specific syntax that allows you to declare multiple properties in a class all at once. You can create an index signature, but not a union of string literals. Of course, you could manually add each property, but I assume you're looking for a more efficient solution.

One workaround is to use declaration merging to incorporate the properties into the class instance's interface. By defining a class like class PostEntryIndex {}, you generate a value named PostEntryIndex that represents a class constructor, as well as an interface also named PostEntryIndex which mirrors the class structure. With interface merging, you can easily append any desired properties:

interface PostEntryIndex extends IPostEntryIndex { }
class PostEntryIndex {
  constructor() {
    categories.map(cat => this[cat] = new Entry())
  }
}

It's important to note that utilizing this method bypasses strict class property initialization checks enforced by --strict mode. This means you won't receive warnings from the compiler regarding uninitialized properties, although in this context using categories does initialize the necessary properties.

In addition, after merging the interfaces in this manner, the implements clause becomes somewhat redundant, so it has been omitted here. (In truth, implements clauses are often unnecessary due to TypeScript's structural type system allowing objects with compatible structures to be used interchangeably.)

To test if everything functions correctly:

const pei = new PostEntryIndex();
pei.projects; // Entry

Seems to be working fine. Hopefully this information proves useful to you; best of luck!

Playground link for code demonstration

Answer 2

There isn't a specific syntax that allows you to declare multiple properties in a class all at once. You can create an index signature, but not a union of string literals. Of course, you could manually add each property, but I assume you're looking for a more efficient solution.

One workaround is to use declaration merging to incorporate the properties into the class instance's interface. By defining a class like class PostEntryIndex {}, you generate a value named PostEntryIndex that represents a class constructor, as well as an interface also named PostEntryIndex which mirrors the class structure. With interface merging, you can easily append any desired properties:

interface PostEntryIndex extends IPostEntryIndex { }
class PostEntryIndex {
  constructor() {
    categories.map(cat => this[cat] = new Entry())
  }
}

It's important to note that utilizing this method bypasses strict class property initialization checks enforced by --strict mode. This means you won't receive warnings from the compiler regarding uninitialized properties, although in this context using categories does initialize the necessary properties.

In addition, after merging the interfaces in this manner, the implements clause becomes somewhat redundant, so it has been omitted here. (In truth, implements clauses are often unnecessary due to TypeScript's structural type system allowing objects with compatible structures to be used interchangeably.)

To test if everything functions correctly:

const pei = new PostEntryIndex();
pei.projects; // Entry

Seems to be working fine. Hopefully this information proves useful to you; best of luck!

Playground link for code demonstration

Answer 3

Answer №2

This code snippet is compatible with https://www.typescriptlang.org/play/

export type CategoryList = 'people' | 'projects' | 'topics' | 'tools'

class Entry {
}

type IPostEntryIndex = {
  [item in CategoryList]: Entry
}

const categoriesList: CategoryList[] = ['people', 'projects', 'topics', 'tools']

class PostEntryIndex implements IPostEntryIndex
{
  people: any;
  projects: any;
  topics: any;
  tools: any;

  constructor () {
    categoriesList.map(category => this[category] = new Entry())
  }
}

Answer 4

This code snippet is compatible with https://www.typescriptlang.org/play/

export type CategoryList = 'people' | 'projects' | 'topics' | 'tools'

class Entry {
}

type IPostEntryIndex = {
  [item in CategoryList]: Entry
}

const categoriesList: CategoryList[] = ['people', 'projects', 'topics', 'tools']

class PostEntryIndex implements IPostEntryIndex
{
  people: any;
  projects: any;
  topics: any;
  tools: any;

  constructor () {
    categoriesList.map(category => this[category] = new Entry())
  }
}

Create a class with additional attributes to support different types of options

Answer №1

Answer №2

Similar questions

To collapse a div in an HTML Angular environment, the button must be clicked twice

When the value is empty, MUI Autocomplete will highlight all items

Learn how to utilize the "is" status in Postma within your code, even when this particular status is not included in the response

Initiating a GET request to execute an SQL query with specified parameters

Incorporating Google Pay functionality within Angular applications

Incorrect typings being output by rxjs map

Potential Null Object in Typescript Mongoose: A Concern

Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

Issue occurred while trying to render a React component with Typescript and WebPack

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

What is the most efficient way to simultaneously check multiple variables for undefined values?

Encountering an issue with top-level await in Angular 17 when utilizing pdfjs-dist module

What is the best way to accurately parse a Date object within a TypeScript class when the HttpClient mapping is not working correctly?

Exploring URL Parameters in Angular Unit Testing

Is there a way to go back to the previous URL in Angular 14?

Component re-rendering and initializing useReducer

Discovering the generic parameter in the return type using TypeScript

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

Avoid using dot notation with objects and instead use `const` for declaring variables for more

How to implement a responsive menu using the onPress attribute of TouchableOpacity