How to declare an object whose properties are of type string only using TypeScript?

Question

I have a configuration array in my component like this.

...
config: ButtonConfig[];
...
this.config.push(new ButtonConfig(...));
...

Today, I r

Answer 1

const btn: {[keys: string]: string} = {
    key: 'value',
    anotherKey: 'anotherValue'
}

This example should help you.

Answer 2

The most simple answer is this:

export type ButtonConfigs = {
  [key: string]: ButtonConfig;
}

This works very well, if you want a high level of dynamics.

If you want to lock it down a little, you could define an enum that contains the possible keys you want to allow:

export enum ButtonConfigKeys {
  'submitConfig',
  'someOtherKey',
  '...'
}

export type ButtonConfigs = {
  [key: ButtonConfigKeys]: ButtonConfig;
}

Answer 3

You can do it like following:

config: { [key:string]: ButtonConfig } = {};

...
this.config.submitButton = new ButtonConfig(...);
...

Here's a working stackblitz project: https://stackblitz.com/edit/angular-opc8yg