index Signature (동적으로 Object에 property 추가하기)

문제사항

JavaScript

• JS에서는 key의 type으로 number , string , symbol 을 이용하여 dynamic 하게 object에 property를 추가할 수 있다.

const person1 = {};
person1['name'] = 'DongHyun';
person1[age] = 24; // same as person1['age'] = 24
person1[2] = "World!" 
person1.childName = "Jisoo";

• 점 표기범 (dot-notation) 이나 괄호 표기법 (bracket-notation) 둘다 지원한다.
  • 단, number 이 key type일 경우 괄호 표기법은 지원이 되지 않는다.
• person1[age] = 24; 처럼 key에 number도 string도 아닌 값이 들어온다면 JS는 런타임이전에 toString() 을 암묵적으로 호출하여, person1['age'] = 24 로 만든다.

TypeScript

• TS에서는 toString() 을 암묵적으로 호출해주지 않는다. 즉 key type은 무조건 number 아니면 string 이어야 한다. (symbol은 아직까지 미지원)
• 또, 어떤 key type을 Object가 Dynamic하게 받을 것인지 조차 정해줘야 한다.

const person1 = {};
person1[name] = 'DongHyun' // error! -> toString()을 암묵적으로 호출하지 않음
person1[name.toString()] = 'DongHyun' // Ok! 
const foo : string = "foo";
person1[foo] = "hello" 
// error! => element implicitly has an 'any' type because expression of type 'string' can't be used to index type 
// 어떤 key Type을 Object가 받을 것인지 명시가 안 되어 있음

해결방안

해당 Object의 interface가 존재하는 경우

interface LooseObject {
    [key: string]: number | string;
}

let obj: LooseObject = {};
obj["hello"] = "world" // okay!

• [key: type] : valueType 형식으로 interface 안에 선언해주면 된다.

interface는 존재하지 않는 경우

const levels: {[key: string]: Array<number> | null} = {
    "beginner" : [10, 10, 10],
    "intermediate" : [15, 15, 20],
    "advanced" : [20, 20, 40],
    "Custom" : null,
  };

• 마치 함수처럼 변수명 이후에 {[key : type] : valueType} 형식으로 선언해주면 된다.

기타 사항

• index Signature 는 object 뿐만 아니라, array에서도 사용 가능하다.
• string 과 number 의 혼용도 가능하다
• readonly 키워드를 이용하여 읽기 전용 색인으로 받는 것도 가능하다.
• 기타 사항들은 아래의 링크를 클릭하여 확인하면 된다.

참고사이트

• ts-for-jsdev : 색인 가능 타입
• Index Siganature
• MDN : Property_Accessorrs