[typescript] 인덱스 시그니처 정의

함수에서 매개변수를 받아와서 특정 객체의 키값에 매핑해서 써야하는데, 타입이 안맞는다고 자꾸 에러가 났다.

키의 타입이 정의되어있지 않아서 그런거였다.

 

인터페이스를 정의할 때 value 타입은 정의되는데, key는 안된다고한다.

 

그래서 인덱스 시그니처를 적용시켜봤다.

 

인덱스 시그니처는 내가 에러가 난 저 상황처럼, 객체의 키값에 동적으로 접근하기 위해 사용한다.

 

지피티형한테 물어보니깐 다음과같은 이유로 사용한다고 한다.

 

*인덱스 시그니처의 사용 이유
1. 동적 키 접근: 객체의 키가 사전에 정의되지 않은 경우에 유용.
2. 타입 안정성: 모든 키와 값이 특정 타입을 따르도록 강제함.
3. 유연성: 객체의 키가 동적으로 추가되거나 변경될 수 있는 경우 유연하게 대응가능.

 

방법은 쉬운데

 

시그니처를 먼저 정의해놓고 그걸 확장해서 인터페이스 작성하거나

인터페이스를 정의할때 key: 타입을 지정해줘도 된다.

 

나는 이렇게 했다.

 

 

매개변수 타입 (string) = 키 인덱싱 타입 (string) 일치 시켜줬더니 에러 해결!

 

공식문서를 읽어보면 인덱싱에 사용할 수 있는 타입들이 정해져있는데,

 

Only some types are allowed for index signature properties: string, number, symbol, template string patterns, and union types consisting only of these.

 

스트링, 넘버,심볼, 템플릿 문자열 패턴, 얘네들로만 구성된 유니온 타입

걍 쉽게 말해 스트링이랑 숫자만 쓸수있다.

 

 

그리고 여기 multiple Indexer라는 개념이 나오는데, 이부분은 어려워서 잘 이해가 안된다.

그래도 정리해보자면,

" 타입 스크립트는 multiple Indexer를 지원한다 "

( 단, 특정 조건에서만 - 키 타입이 숫자인 경우에는 키 타입이 스트링인 인덱서의 서브타입이어야한다)

 

= 키 타입 & 밸류 타입을 정의할때 여러가지 유형을 중첩 적용시키려면, 숫자형인 키의 밸류타입이 문자형인 키의 밸류타입의 서브타입이어야한다.

 

예를 들어,  이렇게 해주면 에러가 난다

interface Animal {
  name: string;
}
 
interface Dog extends Animal {
  breed: string;
}
 
interface NotOkay {
  [x: number]: Animal;
  [x: string]: Dog;
}

 

 

근데 아래처럼 해주면 에러가 안난다

interface Animal {
  name: string;
}
 
interface Dog extends Animal {
  breed: string;
}
 
interface NotOkay {
  [x: number]: Dog;
  [x: string]: Dog;
}

 

또는 이것도 맞는코드

interface Animal {
  name: string;
}
 
interface Dog extends Animal {
  breed: string;
}
 
interface NotOkay {
  [x: number]: Dog;
  [x: string]: Animal;
}

 

이건 공식 문서 예제인데, 처음에 이걸 보고 헷갈렸으나 블로그 정리를 하다보니 완전히 이해가 됐다.

 

 

좀 더 아래쪽에 있는 예제가 앞순서에 나왔다면 이해가 더 쉬웠을것 같다.

interface NumberOrStringDictionary {
  [index: string]: number | string;
  length: number; // ok, length is a number
  name: string; // ok, name is a string
}

 

위 인터페이스에서 아래와같이 키: 밸류값을 추가하면 에러가 날 것이다.

type : object 

-> 얘는 number | string 의 하위 속성이 아니니까..~

 

 

쓰다보니 제대로 이해된것 같다.

 

블로그야 고마워~~