인덱스 서명 시작하기

이 블로그 게시물에서 우리는 typescript의 개념인 인덱스 서명에 대해 배울 것입니다.

색인 서명이란 무엇입니까?

인덱스 서명은 개체의 값이 일관된 유형일 때 개체/사전의 유형을 나타내는 데 사용됩니다.

구문: { [key: KeyType] : ValueType }
응용 프로그램 전체에서 사용할 수 있는 색상 속성을 구성할 수 있는 테마 개체가 있다고 가정합니다. 값은 문자열 유형과 일치합니다. 이는 **인덱스 서명을 **적용할 수 있는 **완벽한 기회입니다.

let colorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: "orange",
    },
  },
}

아래 사전에 유형 정의를 추가하는 방법을 살펴보겠습니다.

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "r...

Playground Link

*인덱스 시그니처에 정의된 타입이 아닌 다른 타입의 값을 추가하려고 하면 어떻게 될까요?
*

typenumber 값을 추가하려고 하면 typescript가 외치기 시작합니다. 아래 예를 살펴보십시오.

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: 1231313,
    },
  },
}

위의 예에서 인덱스 서명의 값 유형을 문자열로 정의했지만 키main에 대해 값을 숫자인 1231313로 지정했습니다.

typescript에서 얻게 될 오류,

(property) main: number
Type 'number' is not assignable to type 'string'.(2322)
input.tsx(61, 7): The expected type comes from this index signature.

위의 오류를 어떻게 해결합니까? 문자열 또는 숫자를 허용하도록 ColorsTheme의 유형 정의를 수정합니다.

let ColorsTheme : {
  [key: string]: {
    [key: string]:{
      [key: string]: string | number 
    }
  }
}

 ColorsTheme = {
  palette: {
    success: {
      main: "green",
    },
    error: {
      main: "red",
    },
    warning: {
      main: 1231313,
    },
  },
}

참고: 그러나 색인 서명이 속성 유형의 합집합인 경우 다른 유형의 속성이 허용됩니다 — Typescript docs

interface NumberOrStringDictionary {
    [index: string]: number | string | boolean;
    length: number; 
    name: string; 
    isVisible: boolean; 

}

*인덱스 서명을 위해 문자열이나 숫자, 기호 이외의 키를 추가하려고 하면 어떻게 되나요?
*

인덱스 서명에서 키에 대해 부울로 유형을 추가하려고 하면 인덱스 서명 매개변수 유형이 '문자열', '숫자', '심볼' 또는 템플릿 리터럴 유형이어야 하기 때문에 TypeScript가 다시 소리치기 시작합니다.

let foo: {
  [key: boolean] : number // Error : An index signature parameter type must be 'string', 'number', 'symbol', or a template literal type
} 

foo = {
  bar: 1
}

요약:

색인 서명은 값이 일관된 유형이거나 처리 중인 객체의 구조를 모르는 객체의 유형을 정의하는 데 사용할 수 있습니다.

결론:

그게 다야. 시간을 내어 블로그 게시물을 읽어주셔서 감사합니다. 모두가 색인 서명 개념에 대해 이해했으면 합니다.

게시물이 유용했다면 ❤️를 추가하고 댓글 섹션에서 내가 놓친 부분이 있으면 알려주세요. 블로그 피드백은 환영합니다.

트위터로 소통해요 : ()

참조:

Typescript Docs
2. Index Signatures in Typescript