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

What situations call for the use of 'import * as' in TypeScript?

Binding iframes in Angular 6

Ways to address the issue arising from the utilization of the "as" keyword

Retrieve a list of all file names within a designated directory using Angular

There is no initial value set for the property and it is not definitively assigned in the constructor

Automatic verification of OTP in Ionic 3

The Angular tutorial for the "Tour of Heroes" is experiencing issues with aligning the heroes' list properly

What is the best way to send my Array containing Objects to the reducer using dispatch in redux?

Passing Selected Table Row Model Data to Backend in Angular 7

Error Alert: Redundant Identifier in Angular 2 TypeScript Documents

I prefer the value to switch to false whenever I navigate to a new route and then return to the previous route, as the sidebar remains open

What is the proper way to declare an array of arrays with interdependent types?

Module '@tanstack/react-table' cannot be located even though it has been successfully installed

What is the best way to send serverside parameters from ASP.Core to React?

Using Promise.all like Promise.allSettled

Tips on changing the date format in Typescript to the desired format

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

The creation of the Angular project was unsuccessful due to the outdated circular-json dependency

How can I use TypeScript to wrap a component in Vue 3?

Collaborating on code between a Typescript React application and a Typescript Express application