9.1 인덱스 시그니처 (Index Signature)

9.1.1 인덱스 시그니처란?

타입스크립트의 인덱스 시그니처는 객체의 인덱스 타입과 해당 인덱스에 해당하는 값의 타입을 정의하는 방식입니다. 이를 통해 객체의 프로퍼티 이름을 사전에 알 수 없거나 동적으로 변경될 수 있는 경우에도 타입의 안전성 보장이 가능합니다. 인덱스 시그니처는 다음과 같은 형태로 표현됩니다.

interface StringArray {
  [index: number]: string;
}

위의 코드에서 index는 인덱스의 이름이며, 이는 임의로 변경할 수 있습니다. number는 인덱스의 타입을 의미하며, string은 해당 인덱스에 할당될 값의 타입을 의미합니다. 이 예제에서 StringArray는 숫자 인덱스에 문자열 값을 가지는 것을 의미합니다.

9.1.2 인덱스 시그니처의 허용 타입

타입스크립트에서 인덱스 시그니처에 허용되는 인덱스 타입은 string, number, 템플릿 문자열입니다.

1) string 인덱스 시그니처

string 인덱스 시그니처를 사용하면 임의의 문자열을 키로 사용할 수 있습니다.

interface StringDictionary {
  [key: string]: string;
}

let refDictionary: StringDictionary = {};

refDictionary["first"] = "Hello";
refDictionary["second"] = "World";

console.log(refDictionary["first"]);  // Hello
console.log(refDictionary["second"]); // World

StringDictionary는 문자열 키에 문자열 값을 가지는 인터페이스입니다. refDictionary 객체는 이 인터페이스를 구현하므로, 문자열을 키로 사용하여 문자열 값을 저장할 수 있습니다.

2) number 인덱스 시그니처

number 인덱스 시그니처를 사용하면 숫자를 키로 사용할 수 있습니다.

interface NumberDictionary {
  [index: number]: string;
}

let refDictionary: NumberDictionary = {};

refDictionary[0] = "zero";
refDictionary[1] = "one";
refDictionary[2] = "two";

console.log(refDictionary[0]); // zero
console.log(refDictionary[1]); // one
console.log(refDictionary[2]); // two

NumberDictionary는 숫자 인덱스에 문자열 값을 가지는 인터페이스입니다. 따라서 refDictionary 객체는 숫자를 키로 사용하여 문자열 값을 저장할 수 있습니다.

3) 템플릿 문자열 인덱스 시그니처

타입스크립트 4.1 버전부터 템플릿 문자열을 인덱스 시그니처의 키로 사용할 수 있습니다. 이 경우 :이 아닌 in을 사용해 명시합니다.

interface TemplateStringIndex {
  [K in `key${number}`]?: string;
}

let refObj: TemplateStringIndex = {};
refObj["key1"] = "Value 1";

TemplateStringIndex라는 인터페이스는 템플릿 문자열 타입인 key${number}을 인덱스 시그니처의 키로 사용하고 있습니다. 즉, key1, key2, key3, ... 형태의 키를 가질 수 있습니다. 각 키에는 문자열 타입의 값이 할당될 수 있습니다. 이와 같이 템플릿 문자열 인덱스 시그니처를 사용하면 동적으로 변하는 키를 가진 책체를 다룰 수 있습니다.