[TypeScript] 타입스크립트 인덱스 시그니처 (Index Signature)

🎯 타입스크립트 인덱스 시그니처 (Index Signature)

📝 자바스크립트 Index Signature

const dog = {
    breed: "retriever",
    name: "elice",
    bark: () => console.log("woof woof"),
};

dog["breed"]; // value의 key인 breed 문자열로 객체의 value 접근 => 'retriever'

• 객체의 특정 value에 접근할 때 그 value의 key를 문자열로 인덱싱해 참조하는 방법

 

📝 타입스크립트 Index Signature

interface Dictionary<T> {
    [key: number]: T;
}

let keys: keyof Dictionary<number>; // 숫자
let value: Dictionary<number>['foo']; // 오류, 프로퍼티 'foo'는 타입 'Dictionary<number>'에 존재하지 않습니다.
let value: Dictionary<number>[42]; // 숫자

// Record<K,T>
interface Dictionary<T> = Record<number, T>

• 자바스크립트의 인덱스 시그니처에 대한 타입을 지정해주는 것
• 보통 객체에 어떤 프로퍼티들이 있는지 명확히 알 수 없을 때 사용한다.
• Record<K,T>로 간편하게 지정해줄 수 있다.
  • 타입 T의 프로퍼티의 집합 K로 타입을 구성

 

📝 Index Signature 사용 1 :: 객체의 프로퍼티들을 명확히 알 수 없을 때

type ArrStr = {
    [key: string]: string | number;
    // [field: string]: string; // Duplicate index signature for type 'string'
    [index: number]: string; // 인덱스 시그니처에 number를 넣으면 string 타입 데이터를 참조
    length: number; // 일반 프로퍼티와 공존 가능
};

• index 타입은 똑같은 걸 선언해줄 수 없다! ⇒ 하늘 아래 같은 타입의 Index signature는 있을 수 없음
  • key가 string인 인덱스 시그니처는 하나만 존재 가능. 한 번 더 정의하려고 하면 타입 에러
  • 다른 일반 프로퍼티와 공존 가능
• key는 object 키의 자리를 표시하기 위한 용도
• ArrStr 타입의 데이터를 인덱스 시그니처로 참조할 때 문자열을 넣으면 string 또는 number 타입 데이터 참조한다.
• 인덱스 시그니처에 number를 넣으면 string 값 참조

 

📝 Index Signature 문제점

type ArrStr = {
    [key: string]: string | number;
    [index: number]: string;
};

const a: ArrStr = {}; // 타입 선언

a["str"]; // 에러 x

• 타입 선언을 해주면 해당 객체를 프로퍼티로 강제로 할당해야 되는데 그 타입에 인덱스 시그니처로만 이루어져 있으면 빈 객체로 할당해도 타입 에러가 발생하지 않는다.
  • 즉, 인덱스 시그니처'만' 사용할 시, 타입을 표시해준 빈 객체에 에러가 나지 않습니다.
• key마다 다른 타입을 가질 수 없음 (key 타입이 string 이면 무조건 string 또는 number 타입)
• 타입에 유연함을 제공하는 대신 키 이름을 잘못 쓴다든지 하는 휴먼 에러를 저지를 가능성
• 따라서 어떤 타입이 올지 알 수 있는 상황이라면 정확한 타입을 정의하여 실수를 방지하는 게 좋다.
• Index signature는 런타임에 객체의 프로퍼티를 알 수 없는 경우에만 사용할 것