개체가 '정의되지 않음'일 가능성이 있습니다.ts(2532)

해결책은 없지만 오류를 처리하는 방법은 있습니다.

Typescript의 Microsoft 팀원은 관련 트렌드에서 다음과 같이 말했습니다"This is working as intended".

많은 개발자들이 배열, 함수 콜백, 문자열 값, React 구성 요소 내부의 html 요소(내 경우)와 같은 다양한 사용 사례에서 이에 대해 이야기하고 있으며 목록이 점점 커지고 있습니다.

작동하지 않는 제안된 솔루션을 찾을 수 있었습니다. 배경은 "유형 시스템은 우리가 추적하는 것이 아닌 빈 배열과 비어 있지 않은 배열을 효과적으로 구분해야 합니다"라는 것입니다.

이에 대해 논의되는 몇 가지 링크는 다음과 같습니다.

Null References: The Billion Dollar Mistake

How can I solve the error 'TS2532: Object is possibly 'undefined'?

False "Property does not exist on type 'never'" when changing value inside callback with strictNullChecks

'Property does not exist on type 'never'

TypeScript does not expect variable change in forEach

TS2531: Object is possibly 'null'

How to suppress "error TS2533: Object is possibly 'null' or 'undefined'"?

Getting Object is possibly 'undefined' in typescript react

Annotate immediately-invoked functions for inlining flow control analysis

오류 억제

거래

Suppress errors in .ts files using ’// @ts-ignore’ comments

//@ts-ignore 주석은 다음 행에서 발생하는 모든 오류를 표시하지 않습니다. @ts-ignore 다음의 나머지 주석에서 어떤 오류가 억제되고 있는지 설명하도록 하는 것이 좋습니다.

이 주석은 오류 보고를 억제할 뿐이므로 이 주석을 매우 드물게 사용하는 것이 좋습니다.

내가 이것을 해결하는 방법

"유형 및 어설션의 올바른 조합"

따라서 TypeScript에는 명시적 검사를 수행하지 않고 유형에서 null 및 undefined를 제거하기 위한 특수 구문도 있습니다. 식 다음에 작성하는 것!은 값이 null이 아니거나 정의되지 않았음을 나타내는 유형 어설션입니다.

# case
const textElementRef = useRef();
// this provokes the error in the next line
const text = textElementRef.current;
// Object is possibly 'undefined'.ts(2532)'
const textWidth = text.offsetWidth;

# what I was trying
const textElementRef = useRef();
const text = textElementRef.current; 
const textWidth = text!.offsetWidth; <-- type assertion
// causing : Property 'offsetWidth' does not exist on type 'never'.ts(2339)

# then I have to change the useRef definition too
const textElementRef = useRef<HTMLSpanElement>(null);
const text = textElementRef.current!; <-- type assertion
const textWidth = text.offsetWidth;