[React/Typescript] error 'TransitionStatus' 형식의 식을 ~ 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.

 

'TransitionStatus' 형식의 식을 '{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.
'{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' 형식에 'unmounted' 속성이 없습니다.ts(7053)

 

 

페이지 전환 시 페이드인/페이드아웃 효과를 주는 Fade 컴포넌트 작성 중,

이런 에러가 떴습니다

 

문제의 코드는 아래...

전환 효과 애니메이션 수행 상태를 정의하는 컴포넌트임.

 

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

 

이걸 사용하는 아래 코드에서 에러가 발생하였다.

 

<div
  style={{
    ...defaultStyle,
    ...transitionStyles[state], // error
  }}
>

 

서치해보니 객체 접근 시 타입을 인식못해서 생기는 타입스크립트 에러라고 한다.

인덱스 시그니처..? 쓰면 된다는데 사실 뭔지 잘 모르겠음

 

 

그래서 일단 뭐가 됐든간에, 어떤 타입이든 상관없으니 알아서 받아먹어라! 라는 의미로 키값 타입을 any로 선언해주면 된다.

 

const transitionStyles: { [key: string]: any } = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

해결완료!

 

자세한 설명은 아래 블로그에서 볼 수 있다.

큰 도움이 되었음 🙏 🙏

 

https://ella951230.tistory.com/entry/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%90%EB%9F%AC-Type-undefined-cannot-be-used-as-an-index-type

타입스크립트 에러) Element implicitly has an 'any' type because expression of type 'string' can't be used to index type