사프로 열코 중에, 객체의 특정 value를 가져와야 해서
obj[key]
식으로 접근했는데 TypeError가 발생! 🚨
해당 에러를 구글링 하다Index Signature
를 알게되어 공부하게 되었다.
기존 JavaScript에서 객체에 접근을해보자.
const obj = {
fruit: 'watermelon',
color: 'green',
}
obj['color'] // 'green'
특정 value에 접근하고 싶을 때, 해당 value의 key를 obj에 문자열로 인덱싱해 참조하는 방법이 바로 Index Signature
다.
TypeScript
의 Index Signature
는 위와 같이 기존 JavaScript
의 Index Signature
에 대한 Type을 지정해주는 것이다.
그럼 Type을 지정해보자.
interface objType {
[key: string]: string,
}
const obj: objType = {
fruit: 'watermelon',
color: 'green',
}
obj['color'] // 'green'
위와 같이 지정해주면 된다!
원래는 객체의 타입을 value별로만 지정해주었다면, index signature
를 사용하면 key
와 value
둘 다 type을 지정해줄 수 있다.
만약 index signature
로 type을 정해주지 않는다면, 아래와 같은 에러가 뜬다.
const obj = {
fruit: 'watermelon',
color: 'green',
}
obj['color'] // No index signature with a parameter of type 'string' was found on type 'obj'.
obj
에서 string
유형의 parameter를 찾지 못하겠다는 내용이다.
key가 숫자인 경우도 있다.
const obj = {
1: 'hello',
2: 'bonjour',
3: '안녕',
}
이럴 때도 [key: string]: string
으로 인덱스 시그니처를 해줄 수 있겠지만, 배열처럼 인덱스 번호로 접근하게 할 수도 있다.
interface objType {
[index: number]: string;
}
const obj: objType = {
1: 'hello',
2: 'bonjour',
3: '안녕',
}
obj[2] // 'bonjour'
key가 number형식이라면, number type으로 주는게 아무래도 직관적이다.
만약 key 속성들이 숫자도 있고 문자열도 있다면?
interface objType {
[index: number]: string;
[key: string]: string;
}
const obj: objType = {
1: 'hello',
color: 'green',
2: 'bonjour',
fruit: 'watermelon',
3: '안녕',
}
obj[2] // 'bonjour'
obj['fruit'] // 'watermelon'
2가지 방법 다 index signature
로 설정해주면, 인덱스 번호나 문자열로 둘 다 접근이 가능해진다!
객체의 특정 value에 접근하고 싶을 때
객체의 속성들(key, value)의 모든 이름이나 type을 명확히 알지 못할 때, 속성의 type만 우선 지정해주어 객체의 정보들에 접근하기 위해 사용
( 반드시, 속성(key)의 type은 string
혹은 number
여야만 한다. )
속성의 type을 알고있는 상황이라면, 정확한 type을 정의하여 실수를 방지