작업 상태

- react 코드를 tsx코드로 변환하던 중에 발생했습니다.
 


에러 메시지 

- Property 'focus' does not exist on type 'never'.ts(2339)

    const liRef = useRef(null);
...
    useEffect(() => {
        if (qna && qna.id === question.id && liRef.current) {
            liRef.current.focus();  //문제 발생 메시지
        }
    }, [qna, question.id]);
    return (
        <li ref={liRef} tabIndex={0}

원인

- 타입스크립트가 해당 요소에 대한 속성을 인식하지 못하는 것을 나타냅니다. 해당 요소의 타입을 명시적으로 지정하거나 해당 요소에 대한 타입 정의를 확실히 하는 것이 필요합니다. 
- useRef를 사용할 때 타입을 명시하지 않으면 타입추론이 이루어지지 않아서 never 타입으로 간주될 수 있습니다.


처리

    const liRef = useRef<HTMLLIElement>(null);


참고

문서 객체 모델(DOM) - Web API | MDN (mozilla.org)

 

문서 객체 모델(DOM) - Web API | MDN

문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로

developer.mozilla.org

never 타입은 절대 발생할 수 없는 타입을 나타냅니다. 예를 들어, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰입니다. 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있습니다

소개 · GitBook (typescript-kr.github.io)

 

TypeScript 한글 문서

TypeScript 한글 번역 문서입니다

typescript-kr.github.io

 

+ Recent posts