Index Signature란?

Index Signature란?

인덱스 시그니는 { [Key:T] : U } 형식으로 객체가 여러 Key를 가질 수 있으며, Key와 매핑되는 Value를 가지는 경우 사용한다.

이게 무슨 말일까?
간단히말해서, 인덱스 시그니처는 객체가 {Key, Value} 형식이며 Key와 Value의 타입을 정확하게 명시해야 하는 경우 사용할 수 있다!

 

import React from "react";
import { useParams } from "react-router";

interface RouteParams {
  coinId: string;
}

const Coin = () => {
  const { coinId } = useParams<RouteParams>();
  // const { coinId } = useParams<{ coinId: string }>();
  // 비구조화할당 coinId 의 객체를 열면 'coinId: 파라미터' 이므로 coinId로 변수명 통일
  return <div>Coin</div>;
};

export default Coin;

위 코드를 실행하였더니 index signature에 대한 에러가 떴다.

 

자바스크립트가 객체 인덱스 서명에 사용된 객쳉체 대해 암묵적으로 toString을 호출하기 때문에

TypeScript는 초심자가 실수로 자기 발에 총을 쏘려 할 때 오류를 발생시킨다.

Index Signature 선언하기

위 코드에서는 routeParams의 객체는 coinId의 키 값을 가진 객체는 string타입이라고 선언을 해주었습니다.

인덱스 서명을 명시적으로 지정하여, 객체에 저장된 것들을

[coinId:string] : string 구조를 준수하길 바란다.

import React from "react";
import { useParams } from "react-router";

interface RouteParams {
  [coinId: string]: string;
}

const Coin = () => {
  const { coinId } = useParams<RouteParams>();
  // const { coinId } = useParams<{ coinId: string }>();
  // 비구조화할당 coinId 의 객체를 열면 'coinId: 파라미터' 이므로 coinId로 변수명 통일
  return <div>Coin</div>;
};

export default Coin;

위와 같이 RouteParams의 Key인 coinId의 타입상태를 주었더니 오류가 해결이 되었다.

Index Signature의 이름,
즉 [coinId: string]: string에서 coindId는 TypeScript에서 아무 의미가 없으며 가독성을 위해 넣는 내용이다.
이 때 키의 값에도 타입을 지정해준 것일 뿐이다.