[TS] TypeScript 객체 프로퍼티 접근 (Index Signature)

JS에서 객체 프로퍼티 접근법은 2가지가 있다.

const obj = { a: "A" };

// 마침표 접근법
obj.a;

// 대괄호 접근법
obj["a"];

 

 

객체에 값을 수정하거나 추가할 때는 아래의 방법으로 하면 된다.

const obj = { a: "A" };

// 수정(마침표 접근법)
obj.a = "a";

// 수정(대괄호 접근법)
obj["a"] = "a";

// 추가(마침표 접근법)
obj.b = "B";

// 추가(대괄호 접근법)
obj["b"] = "B";

 

TS에서는 JS와 같은 방법으로 추가하면 에러가 발생한다. (수정은 괜찮다.)

const obj = { a: "A" };

// 추가(마침표 접근법)
obj.b = "B";

// 추가(대괄호 접근법)
obj["b"] = "B";

Property 'b' does not exist on type '{ a: string; }'.

객체 obj의 타입에는 'b'라는 속성이 없다는 것이다.

 

객체 obj type

실제로 객체 obj에 마우스를 올리며 위와 같이 타입이 자동으로 추론되어 나온다. (타입을 입력해주어도 똑같다)

 

생각해보면 객체 obj의 타입으로 a의 키를 가진 string 값만 들어올 수 있다.

 

애초에 다른 키 값이 들어 갈 수 없다.

 

이럴 때 타입에 index signature를 사용하면 가능하다.

const obj: { [key: string]: string }  = { a: "A" };

// 추가(마침표 접근법)
obj.b = "B";

// 추가(대괄호 접근법)
obj["b"] = "B";

객체의 키를 [key: string]으로 객체의 키 값은 string값

객체의 값은 string 값으로 설정하는 것이다.

 

이렇게 키 값에 어떤 string 값이 입력가능해져서 할당되어 있지 않는 키로도 접근이 가능하게 된다.

 

---

index signiture를 사용하면 굳이 접근할 때만 사용하는 것이 아니라 객체를 생성할 때도 유연하게 생성할 수 있다.

 

const obj: {a : number, b : number, c : number, d : number} = { a : 1, b : 2, c : 3, d : 4 };

const obj: { [key: string] : number } = { a : 1, b : 2, c : 3, d : 4 };

위의 2개 모두 가능하다.

 

그래도 타입을 명확히 해줘야 좋다고 알고 있는데 정확하지 않다.