-
[에러일지] Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'RefObject<HTMLLIElement>'. No index signature with a parameter of type 'number' was found on type 'RefObject<HTMLLIElement>'카테고리 없음 2024. 1. 12. 00:25
typescript로 next.js프로젝트를 하는 중 위에러가 떴다
이에러는 무슨에러일까?
원인
useRef에 DOM요소를 참조할 때 map으로 만든 list의 DOM을 참조해야 했다 그과정에서 위에러가 떴다.
번역
요소는 'number' 유형의 표현을 'RefObject<HTMLIelement>' 유형의 색인에 사용할 수 없기 때문에 암묵적으로 'any' 유형을 가집니다.
'RefObject<HTMLIelement>' 유형에서 'number' 유형의 매개 변수가 있는 인덱스 서명을 찾을 수 없습니다해결
먼저 useRef에 여러개의 DOM을 참조하려면 배열로 참조해야한다.
const itemOrderListItemSpanRef = useRef<HTMLSpanElement[]>([]) <span ref={el=> itemOrderListItemSpanRef.current[i] = el}>{x}</span>
html테그 속성 중 ref라는 속성이 있고 ref에 useRef를 입력하면 useRef가 해당 DOM을 참조한다.
그리고 여러개의 DOM을 참초하려면 위와같이 콜백함수 안에 useRef.current[i]에 매개변수인 el을 대입시키면 된다.
그 과정에서 해당에러가 났다
원인은 매개변수 el의 타입이 지정이 되지 않아서 이다.
매개변수의 타입을 지정해 주면 해결이 된다.
해결코드
<span ref={el=> itemOrderListItemSpanRef.current[i] = el as HTMLSpanElement}>{x}</span>
as 문법으로 el의 타입을 지정해 주었다.