답변.

인덱스 서명은 키가 미리 알려져 있지 않거나 동적으로 추가될 수 있는 객체의 유형을 설명하는 메커니즘입니다. 값은 특정 유형에 해당합니다. 컴파일 단계에서 속성 목록을 알 수 없는 객체 사전(map/dictionary)을 생성할 수 있습니다.

문맥: JavaScript에서 객체는 종종 연관 배열로 작동합니다. TypeScript의 정적 타이핑은 키와 값의 유형을 명시해야 합니다. 인덱스 서명은 키가 고정된 속성이 아닌 문자열(또는 숫자)이며, 값이 특정 유형인 객체를 설명하는 주요 과제를 해결합니다.

문제: 이러한 객체를 사용할 때 객체의 알려진 속성이 인덱스 서명과 충돌하거나 특정 속성에 대한 정보가 손실될 수 있습니다. 상속된 유형 및 사전 구조 확장에 대한 주의가 필요합니다.

해결: 인덱스 서명은 보통 문자열 또는 숫자 유형의 키로 동적 속성을 설명하는 데 사용됩니다. 예를 들어 { [key: string]: T } 형식의 컬렉션, 캐시 객체 또는 API 응답에 사용됩니다. 유형 제어를 유지하려면 정적 속성과 인덱스 서명을 함께 설명하거나 필요에 따라 유니온 타입을 구성해야 합니다.

코드 예시:

interface StringNumberMap {
  [key: string]: number;
}

const map: StringNumberMap = {
  apples: 2,
  oranges: 5,
  bananas: 3
};

주요 특징:

동적 속성 집합으로 객체를 설명할 수 있습니다.
키는 문자열, 숫자 또는 기호일 수 있습니다.
인덱스 서명은 객체의 모든 속성의 유형에 영향을 미칩니다.

속임수 질문.

인덱스 서명이 있는 인터페이스에 호환되지 않는 유형의 고정 속성을 추가하면 어떻게 됩니까?

TypeScript는 속성의 유형이 인덱스 서명에 명시된 유형과 호환되지 않으면 오류를 발생시킵니다.

interface BadDict {
  [key: string]: number;
  error: string; // 오류: string은 number와 호환되지 않음
}

서로 다른 키 유형(숫자 및 문자열)에 대해 여러 인덱스 서명을 동시에 선언할 수 있습니까?

예, 가능합니다. 그러나 한 가지 주의할 점은 TypeScript에서 숫자 유형의 키는 자동으로 문자열로 변환된다는 것입니다. 숫자 인덱스 서명은 문자열 키에 대한 동의어입니다.

interface NumStrDict {
  [key: string]: number;
  [key: number]: number;
}

인덱스 서명의 값에 대해 유니온 타입이나 인터페이스를 사용할 수 있습니까?

예, 값은 유니온 유형 또는 인터페이스가 될 수 있습니다. 이로써 복잡한 객체의 사전을 설명할 수 있습니다.

interface Dict {
  [key: string]: string | number;
}

일반적인 오류 및 안티 패턴

고정 속성과 인덱스 서명 간의 유형 불일치
모든 유형의 값을 사용하는 것(예: [key: string]: any)
문서의 공백으로 인해 키가 무엇인지 불명확함

실제 사례

부정적 케이스

API 응답 인터페이스에서 [key: string]: any를 사용했습니다. 이후 반환된 객체에 다양한 구조의 데이터가 포함되어 런타임 오류가 발생하고 코드 유지 관리가 어려워졌습니다.

장점:

임의의 구조를 빠르게 설명할 수 있습니다.
사용하기 쉬움

단점:

타입 지정 오류를 쉽게 발생시킬 수 있습니다.
객체 구조의 불명확성

긍정적 케이스

저장소 객체의 인터페이스를 설명하면서 값이 명확한 유형(예: UserData)에 해당하고, 키가 userId(문자열)라는 주석을 달았습니다:

interface UserCache {
  [userId: string]: UserData;
}