[TypeScript]인덱스 시그니처(Index Signature) 사용 방법

인덱스 시그니처(Index Signature)이란?

인덱스 시그니처(Index Signature)는 { [Key: T]: U } 형식으로 객체가 여러 Key를 가질 수 있으며, Key와 매핑되는 Value를 가지는 경우 사용합니다.

 

이번 포스팅에서는 인덱스 시그니처(Index Signature) 사용 방법을 소개합니다.

 

목차

1. 인덱스 시그니처를 사용하는 이유
2. 인덱스 시그니처 사용 방법
3. 인덱스 시그니처 주의사항

---

인덱스 시그니처를 사용하는 이유

인덱스 시그니처는 객체가 <Key, Value> 형식이며 Key와 Value의 타입을 정확하게 명시해야 하는 경우 사용할 수 있습니다. 

 

다음과 같이 급여와 관련된 객체가 존재합니다.

let objSalary {
  bouns: 200,
  pay: 2000,
  allowance: 100,
  incentive: 100
}

객체 내부에 존재하는 속성의 값을 모두 합산해야 하는 경우 인덱스 시그니처를 사용할 수 있습니다.

function totalSalary(salary: 무슨 타입...? ) {
  let total = 0;
  for (const key in salary) {
    total += salary[key];
  }
  return total;
}

totalSalary(objSalary);

totalSalary() 함수의 인자 salary는 Key가 string이고 Value가 number 타입인 객체만 허용해야 합니다. Key가 string 타입이 아닌 경우 객체의 속성을 접근하는데 문제가 발생하며, Value가 number 타입이 아닌 경우 총금액을 계산하는데 문제가 발생하기 때문입니다.

 

다음은 인덱스 시그니처를 사용하여 Key 타입이 string이고 Value 타입이 number인 인자 salary의 타입을 선언합니다.

function totalSalary(salary: {[key: string]: number}) {
  let total = 0;
  for (const key in salary) {
    total += salary[key];
  }
  return total;
}

---

인덱스 시그니처 사용 방법

인덱스 시그니처는 속성에 타입을 선언하는 구문과 유사하지만, 한 가지 차이점이 존재합니다. 속성 이름 대신 대괄호 안에 Key 타입을 작성하는 것입니다.

 

다음은 인덱스 시그니처를 사용하여 객체를 정의하는 몇 가지 예시입니다.

 

▶ Key와 Value의 타입이 string

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

let user: userType = {
  '홍길동': '사람',
  '둘리': '공룡'
}

 

▶ Key의 타입은 string이며 Value의 타입은 string, number, boolean

type userType = {
  [key: string]: string | number | boolean;
}

let user: userType = {
  'name': '홍길동',
  'age': 20,
  'man': true
}

반응형

---

인덱스 시그니처 주의사항

인덱스 시그니처에는 몇 가지 주의사항이 있습니다.

 

▶ Key의 타입은 string, number, symbol, Template literal 타입만 가능합니다.

type userType = {
  [key: string | boolean]: string;
}

위 예제처럼 Key 타입을 string, number 타입이 아닌 타입으로 선언하는 경우 에러가 발생합니다.

 

에러 내용은 string, number, symbol, Template literal 타입을 허용한다는 내용입니다.

 

다음 예제는 Key 타입을 Template literal로 타입을 선언하는 경우입니다.

type userInfoType = "name" | "age" | "address";

type userType = {
  [key in userInfoType]: string;
};

let user: userType = {
  'name': '홍길동',
  'age': '20',
  'address': '서울'
};

 

▶ 존재하지 않는 속성을 접근

다음은 인덱스 시그니처로 정의한 타입으로 객체를 선언합니다. 객체를 선언 후 객체에 존재하지 않는 속성을 접근하는 예제입니다.

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

let user: userType = {
  name: "홍길동",
  age: "20"
};

console.log(user.address);
// undefined

위 예제는 정상적으로 동작하지만 콘솔에 출력된 user.address를 확인하면 undefined가 출력됩다.

 

인덱스 시그니처는 Key 타입을 Value 타입과 매핑합니다. 매핑이 올바르게 되지 않으면 Value 타입이 런타임 시점의 Value 타입과 다를 수 있습니다.

런타임 전에는 stirng

Value 타입을 좀 더 정확하게 명시하기 위해 undefined를 타입으로 추가합니다.

type userType = {
  [key: string]: string | undefined;
};

 

▶ 동일한 Key를 여러개 가질 수 없습니다.

Key는 고유한 값이므로 동일한 Key를 여러개 가질 수 없습니다. 다음은 동일한 Key를 2번 사용하는 경우입니다.

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

let user: userType = {
  name: "홍길동",
  name: "또치",
  age: "20"
};

name이라는 Key를 2번 사용하여 경고가 발생합니다.