如何初始化一個對象的關聯數組？

Question

鑑於

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] } 
     } 
    }, 
    ... 
]; 

和

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; 
    } 
    ... 
} 

我怎麼傳遞的對象colors一部分？我想

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

會做的伎倆，但給我一個錯誤：

[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[];...'. 

什麼是指數的簽名，我能做些什麼呢？

Answer 1

這是因爲編譯器不明白，this.themes的類型爲：

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

所有你需要做的是指定的類型，所以這樣的事情：

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）

Answer 2

嘗試通過'primary'更換[intention: string]，這樣的：

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; 
    } 
    ... 
} 

和警告！您正在使用let運算符定義theme，但該變量已存在！