How to initialize an associative array from an object?

Question

Given

 this.themes = [
    {
       name: 'Material Teal', 
       colors: {
          'primary': { default: [ 0,  150, 136], a100: [167, 255, 237], a200: [100, 255, 218], a400: [ 29, 233, 182], a700: [  0, 191, 165] },
          'accent' : { default: [103,  58, 183], a100: [179, 136, 255], a200: [124,  77, 255], a400: [101,  31, 255], a700: [ 98,   0, 234] },
          'warn'   : { default: [244,  67,  54], a100: [255, 138, 128], a200: [255,  82,  82], a400: [255,  23,  68], a700: [213,   0,   0] }
       }
    },
    ...
];

and

export class Theme {
   name: string;
   colors: { [intention: string]: { default: number[], a100: number[], a200: number[], a400: number[], a700: number[] } };
   constructor(name: string, colors: { [intention: string]: { default: number[], a100: number[], a200: number[], a400: number[], a700: number[] } }) {
      this.name = name;
      this.colors = colors;
   }
   ...
}

how do I pass in the colors part of the object? I thought

let theme = new Theme(theme.name, theme.colors);

would do the trick, but that gives me an error:

[ts] Argument of type '{ 'primary': { default: number[]; a100: number[]; a200: number[]; a400: number[]; a700: number[];...' is not assignable to parameter of type '{ [intention: string]: { default: number[]; a100: number[]; a200: number[]; a400: number[]; a700:...'.

Index signature is missing in type '{ 'primary': { default: number[]; a100: number[]; a200: number[]; a400: number[]; a700: number[];...'.

What is an index signature and what can I do about it?

Nitzan Tomer · Accepted Answer · 2016-07-05 10:00:18Z

This happens because the compiler doesn't understand that this.themes is of the type:

{
    name: string;
    colors: { [name: string]: {
        default: number[];
        a100: number[];
        a200: number[];
        a400: number[];
        a700: number[];
    }
}

All you need to do is specify the type, so something like this:

interface ThemeColor {
    default: number[];
    a100: number[];
    a200: number[];
    a400: number[];
    a700: number[];
}

interface ThemeColors {
    [name: string]: ThemeColor;
}

interface Theme {
    name: string;
    colors: ThemeColors;
}

let themes: Theme[] = [
    {
       name: 'Material Teal', 
       colors: {
          'primary': { default: [ 0,  150, 136], a100: [167, 255, 237], a200: [100, 255, 218], a400: [ 29, 233, 182], a700: [  0, 191, 165] },
          'accent' : { default: [103,  58, 183], a100: [179, 136, 255], a200: [124,  77, 255], a400: [101,  31, 255], a700: [ 98,   0, 234] },
          'warn'   : { default: [244,  67,  54], a100: [255, 138, 128], a200: [255,  82,  82], a400: [255,  23,  68], a700: [213,   0,   0] }
       }
    }
];

export class ThemeClass {
   name: string;
   colors: ThemeColors;

   constructor(data: Theme) {
      this.name = data.name;
      this.colors = data.colors;
   }
}

new ThemeClass(themes[0]);

(code in playground)

ClementNerma · Accepted Answer · 2016-07-05 09:27:03Z

0

Try to replace the [intention: string] by 'primary', like that :

export class Theme {
   name: string;
   colors: { 'primary': { default: number[], a100: number[], a200: number[], a400: number[], a700: number[] } };
   constructor(name: string, colors: { 'primary': { default: number[], a100: number[], a200: number[], a400: number[], a700: number[] } }) {
      this.name = name;
      this.colors = colors;
   }
   ...
}

And WARNING ! You are defining theme with the let operator but this variable already exists !

answered Jul 5, 2016 at 9:27

ClementNerma

1,1111 gold badge11 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to initialize an associative array from an object?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related