• 특정 api를 호출하게 되면 아래와 같이 받아와진다

  {
      buy: [ // 구매 목록
        { tradeDate: '2023-03-22T18:55:07', saleSn: '641acd4ea430e79103bdb95e', spid: 279228251, grade: 5, value: 13300000000 },
        { tradeDate: '2023-03-22T18:55:07', saleSn: '641acd4ea430e79103bdb95e', spid: 279228251, grade: 5, value: 13300000000 },
  			...	
      ],
      sell: [ // 판매 목록
        { tradeDate: '2023-03-22T18:55:07', saleSn: '641acd4ea430e79103bdb95e', spid: 279228251, grade: 5, value: 13300000000 },
        { tradeDate: '2023-03-22T18:55:07', saleSn: '641acd4ea430e79103bdb95e', spid: 279228251, grade: 5, value: 13300000000 },
  			...
      ],
   }
  

• 객체배열 안에 있는 요소의 타입을 TradeLogInfo로 지정했다

  // { "tradeDate": "2023-05-31T01:07:25",
  // "saleSn": "64761f3cad134d6873034f84",
  // "spid": 265204024,
  // "grade": 1,
  // "value": 499000000 }
  interface TradeLogInfo {
    tradeDate: string;
    saleSn: string;
    spid: number;
    grade: number;
    value: number;
  }
  

• 이걸 리액트에서 api 반환값을 tradeInfo라는 상태로 관리하고 있다

  const [tradeInfo, setTradeInfo] = useState<{ buy: TradeLogInfo[]; sell: TradeLogInfo[] } | null>(null);
  

여기서 , 특정 로직에 의해 sell , buy 라는 부분을 분리해서 따로 보여주고자 할 때 (초깃값은 buy)

tradeType이라는 상태를 새로 만들고, 여기에 buy 나 sell 이라는 값을 넣어서

대괄호 표기법을 이용하여 tradeInfo의 키에 접근하는 것이다

const [tradeInfo, setTradeInfo] = useState<{ buy: TradeLogInfo[]; sell: TradeLogInfo[] } | null>(null);
...

const [tradeType, setTradeType] = useState('buy');
// type inference 때문에 굳이 string으로 지정할 필요 x
// const [tradeType, setTradeType] = useState<string>('buy');
...

return (
	<>
		{tradeInfo[tradeType].map((i) => {...}}
	</>
)

근데 에러가 발생한다

'string' 형식의 식을 '{ buy: TradeLogInfo[]; sell: TradeLogInfo[]; }' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.
'{ buy: TradeLogInfo[]; sell: TradeLogInfo[]; }' 형식에서 'string' 형식의 매개 변수가 포함된 인덱스 시그니처를 찾을 수 없습니다.ts(7053)

이 문제는 TS는 객체의 키를 컴파일 시점에 검증하기 때문에,

tradeType 변수의 값이 'buy'나 'sell'임을 알 수 없다

그러므로 TS는 tradeType이 잠재적으로 tradeInfo 객체의 유효하지 않은 키일 수 있다고 판단하므로 에러를 발생시키는 것이다