Portfolio

인덱스 시그니처 속성이란

최근에 컴포넌트의 타입을 전개하면서 참 많은 오류를 겪었다.

대표적인 것이 정의되지 않은 타입을 추가했다는 오류였는데, 이를 해결할 수 있는 것이 인덱스 시그니처 속성이다.

필요성

보통 인터페이스는 클래스에 설정된 주어진 요구사항을 준수하면 오류를 발생시키지 않는다.

그러나, 함수형 컴포넌트로 작성할 때 대표적으로 사용하는 객체 리터럴의 경우는 오류를 출력한다.

그 이유는, 동적 타입이 할당되었을 때 기본적으로 TypeScript는 기본적으로 "얘 지금 실수하는 것 같은데?!"하면서 오류로 추론하기 때문이다.

어찌보면 꽤나 매정한 처사일 수도 있겠으나... 참 다행일 수도 있는게, 철자로 인한 오류만큼은 철저히 검증해주니, 필요한 과정이라고 생각한다.

해결 방법

tsconfig.json 설정

noImplicitAny 프로퍼티를 false로 설정하자. 그렇게 한다면, 암묵적으로 any 타입을 사용하는 것을 허용할 수 있다.

그러나... 이는 만약 애초부터 '저것만큼은 그래도 한 번 체크할 수 있게 하자~'라는 컨벤션을 가지고 있다면 무용지물이다.

인덱스 시그니처 속성을 선언

객체의 새로운 추가 속성이 있는데, 이거 그냥 우리는 any로 처리할 거야~라는 정보를 타입스크립트에 전달할 수 있겠다. 이것이 바로 인덱스 시그니처 속성이다.


interface ButtonInterface {
  onInit?():void;
  onClick():void;
  // 인덱스 시그니처
  [prop:string]: any;
}

const button:ButtonInterface = {
  type: 'button',
  disabled: false,
  onClick() { console.log('버튼 클릭') }
};

배운 점

계속해서 고민했던 게, 여러 타입을 만들어주면 오류를 피할 수 있지만, 생산성이 떨어짐을 공감했다. (특히 CSS-in-JS)

따라서 동적으로 추론할 때 자유도를 증가시키는 인덱스 시그니처 속성을 상황에 맞게 적절히 사용해야겠다.

참고자료

https://yamoo9.gitbook.io/typescript/interface/index-signature

인덱스 시그니처 속성이란?

인덱스 시그니처 속성이란

필요성

해결 방법

배운 점

참고자료