Tips on typing a collection that may hold numerous instances of a particular object

When working with NgRx actions, I need to define the parameter. This parameter is an object that can contain a varying number of specific objects. These objects are already defined in an Interface.

export interface CustomDistribution {
    maxWindowsActive: number,
    resize: boolean,
}

I attempted the following code but encountered issues:

export const updateCustomDistributions = createAction(
  '[Custom Distributions] update Custom Distributions',
  props<{ customDistributions: CustomDistribution{} }>(),
);

Here is an example of the expected object structure and type:

   distributions: { 
      right: {  
        maxWindowsActive: 1;
        resize: true
      },
      left: {  
        maxWindowsActive: 2;
        resize: false
      }
    }

Answer №1

If you're searching for a solution, it's likely to be this:

export interface CustomDistributionGroup {
  [key: string]: CustomDistribution
  // or like that, if you want to allow numeric keys
  // [key: number]: CustomDistribution
  // [key: string | number]: CustomDistribution // both string and number
  // thanks @Brandon Taylor
}

By defining an interface in this way, you can create an object with an infinite number of CustomDistribution objects. However, they must have a key, which seemed to be missing in your example => making it invalid. Here's how it should look:

const someProps: CustomDistributionGroup {
  first: { maxWindowsActive: 1; resize: true },
  second: { maxWindowsActive: 2; resize: false },
  third: { maxWindowsActive: 3; resize: false },
  // and so on
}

Your current example shouldn't function properly, and it's surprising that your IDE isn't detecting any errors.

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

Discovering all imported dependencies in a TypeScript project: A step-by-step guide

Currently, I am attempting to consolidate external libraries into a vendor bundle through webpack. Instead of manually listing dependencies, I would like to automate this process by scanning all TypeScript files in the directory and generating an array of ...

Tips for troubleshooting Angular 4 unit testing using jasmine and karma with simulated HTTP post requests

I have a service that I need to unit test in Angular 4 using TypeScript and Jasmine. The problem is with the http where it needs to perform a post request and get an identity in return, but for some reason, no data is being sent through. My goal is to ac ...

In React TS, the function Window.webkitRequestAnimationFrame is not supported

I'm facing an issue where React TS is throwing an error for window.webkitRequestAnimationFrame and window.mozRequestAnimationFrame, assuming that I meant 'requestAnimationFrame'. Any suggestions on what to replace it with? App.tsx import Re ...

Show a select element with choices that change depending on another select element

I am currently working on a select dropdown component that utilizes the @Input option variable. My goal is to have another instance of this component display options based on the selection made in the first instance. Any suggestions on how to make this h ...

Top Method for Connecting Numerous Dependent HTTP Requests Without the Need for Multiple Subscriptions and Iterations

I'm working on an angular project where I have an API that creates a line item and then loops through to call the API for each modification before firing the print request. Currently, I am using multiple subscribes for this process and I was wondering ...

"Creating a Typescript function that guarantees a non-null and non-undefined return

Currently, I am working on developing a function that is designed to return a specific value. In the event that the returned value is null or undefined, the function should then default to a pre-determined value. function test<A, B>(input: A, fallba ...

Executing a PHP function within a Laravel controller using Ajax

In my Laravel project, I have a Controller named Clientecontroller that is working perfectly. It contains a method called listar() which retrieves client information. public function listar(Cliente $cliente) { $clientes = DB::table('clientes' ...

By default, all groups in the Kendo UI Angular 2 Grid are collapsed

Just started using the new Kendo UI for Angular 2 Grid and I have a question - is it possible to collapse all groups by default when grouping data? I noticed there is a method called collapseGroup(), but it's unclear how to use it or if there's ...

What is the best way to incorporate master/detail components without relying on hierarchical routes?

I need to combine the following elements. An index page with the route /items (plural). This page should be scrollable. When clicking on individual items, I want to display a detail page with the route /item/:id (singular). The detail page should have a ...

Import reactjs modules without the need for Browserify, Webpack, or Babel

I am attempting to set up a TypeScript HTML application in Visual Studio. My goal is to incorporate reactjs v0.14.7 without relying on tools like Browserify. But, how can I utilize the react-dom module in this scenario? Let's set aside TypeScript fo ...

Steps for incorporating jQuery files into Angular 4

As a beginner in Angular 4, I am faced with the challenge of calling a jQuery function using an HTML tag from a method. The jQuery method is located in a separate file. How can I incorporate this into my Angular project? Here's an example: sample() { ...

What is the best way to save Azure Service Bus Message IDs with a package-internal type of 'Long' in MongoDB?

Currently, I am utilizing Azure Service Bus (@azure/service-bus) within a TypeScript-based nest.js service to schedule messages for delivery at a future date. In case the need arises, I must also have the ability to cancel these scheduled messages before t ...

Angular 2 validation issue not functioning as anticipated

Here is a validator function that I have: export const PasswordsEqualValidator = (): ValidatorFn => { return (group: FormGroup): Observable<{[key: string]: boolean}> => { const passwordCtrl: FormControl = <FormControl>group.contr ...

Display various react components based on the value of the property

I am in the process of creating an input component in ReactJs with typescript. The input can vary in types such as text, date, select, or textarea. Depending on the type provided, the displayed control will differ. For example, if set to text, <input t ...

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Lately, I've been working on creating a type library for a JavaScript written library. As I was defining all the namespaces, classes, and interfaces, I encountered an error TS2417 with some of the classes. I double-checked for any issues with method o ...

Reordering items in Angular2 ngFor without having to recreate them

I am facing a unique situation where I must store state within item components (specifically, canvas elements) that are generated through an ngFor loop. Within my list component, I have an array of string ids and I must create a canvas element for each id ...

Changing environment.ts with custom schematics in angular-cli

Currently, I am working on creating customized schematics for our Angular Cli project. One of the tasks involves adding properties/variables to both the environment.prod.ts and environment.dev.ts files. I am curious if anyone has experience with this and h ...

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...

Is it possible to make the 'keyof' property optional?

Illustrate an interface in the following way interface Properties { apple?: string banana?: string cherry?: string date: string } Executing this code works as expected type Sample1 = { [P in keyof Properties]: Properties[P] } const s1: Sample1 ...