📚 인덱스 시그니처?

인덱스 시그니처는 객체가 특정 형식의 속성을 동적으로 가질 수 있도록 정의하는 방법이다.

{[key: T]: U} 형식으로 여러 key를 가질 수 있으며, key와 매핑되는 value를 참조할때 사용한다.

type UserType = {
  [key: string]: string;
};

const user: userType = {
  name: '사용자1',
  adress: '서울특별시어쩌구'
}

console.log(object['name']) // 사용자1

// 구체적인 키 값을 알고있는 경우 일부만 인덱스 시그니처로 만들수도 있다.
interface MixedDictionary {
    [key: string]: number | string; // 인덱스 시그니처
    fixedProperty: boolean; // 명시적으로 정의된 속성
}

인덱스 시그니처 활용 케이스

• 객체의 키가 동적으로 추가되거나 변경될 수 있는 상황
• 객체의 속성들(key, value)의 모든 이름이나 타입을 명확히 알지 못할 때, 속성의 타입만 우선 지정해주어 key를 통해 value에접근하기 위해 사용
  • 속성(key)의 type은 string 혹은 number 이여야만 한다.

인덱스 시그니처와 문자열 리터럴

인덱스 시그니처는 동적 속성을 위해 "모든" 문자열, 숫자, 또는 심볼 키에 대해 타입을 지정하는 용도이다.

따라서 특정 문자열 리터럴로 key를 제한하고 싶다면 매핑된 타입이나 명시적 속성 선언, Record를 통해 구현할 수 있다.

type SpecificKeys = 'WEB' | 'SERVER';

// 둘다 동일하게 동작한다.
type SpecificDictionary = {
  [key in SpecificKeys]: number;
};
type SpecificDictionary = Record<SpecificKeys, number>;

인덱스 시그니처와 Object.keys()

Object.keys()는 객체의 자기 속성 키들을 문자열 배열로 반환하는 자바스크립트 내장함수이다.

→ 이 배열의 요소는 객체의 키 이름을 문자열로 다루기 때문에 string[] 타입을 반환한다.

타입스크립트의 핵심 원칙으로 ‘타입 체크를 할 때 그 값이 가진 형태에 집중한다.’ 라는 부분이 있는데 이 부분이 자바스크립트의 덕 타이핑과 관련이 있다.

덕 타이핑 객체의 타입이 클래스 상속, 인터페이스 구현 등으로 결정되는 것이 아닌 어떤 객체가 필요한 변수와 메서드만 지니고 있다면 그냥 해당 타입에 속하도록 인정해 주는 것을 의미한다.