객체에서 연관 배열을 초기화하는 방법은 무엇입니까?

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을 정의하지만이 변수가 이미 존재합니다!