[TypeScript] 인덱스 시그니쳐

 

공식문서를 보면 Index Signature에 대한 내용으로 다음과 같이 적혀있다.

 

Index Signatures

Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values.

 

쉽게 말해 인덱스 시그니쳐는 객체의 프로퍼티의 key과 value의 타입을 정해주는 것을 말한다. 인덱스 시그니쳐는 객체의 모든 프로퍼티가 특정 타입을 갖도록 강제하며, {[key : T] : U} 형식이다.

 

예제를 통해 살펴보자.

 

 

 

1. 문자열 키 인덱스 시그니쳐

---

문자열 키를 사용하는 인덱스 시그니쳐의 경우 객체의 모든 프로퍼티 key는 문자열이고, value는 특정 타입이어야 한다.

 

아래의 경우, NumberMap 인터페이스 모든 키가 문자열이고 값이 숫자열이도록 정의하고 있다.

만약 이 때 myNumberMap에 100개의 과일이 더 추가되어야 한다면 인터페이스에도 각 프로퍼티를 모두 정의해주어야 하기 때문에 매우 불편할 것 이다. 바로 이럴때 인덱스 시그니쳐를 이용하면 간단하게 타입을 정의할 수 있다.

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

let fruits: Fruits = {
  apple: 10,
  banana: 20,
  cherry: 30
  // (... 약 100개의 과일)
};

console.log(fruits.apple); // 10
console.log(fruits["banana"]); // 20

 

[key : string] : string 은 인덱스 시그니쳐 문법으로 이 객체 타입에는 key가 string 타입이고 value가 string 타입인 모든 프로퍼티를 포함된다 라는 의미이다.

 

 

 

2. 숫자 키 인덱스 시그니쳐

---

숫자 키를 사용하는 경우 객체의 모든 프로퍼티 key는 숫자이고 value는 특정 타입이어야 한다.

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

let stringArray: StringArray = ["Hello", "World"];

console.log(stringArray[0]); // "Hello"
console.log(stringArray[1]); // "World"