[typescript] “오류 TS2533 : 개체가 ‘null’또는 ‘undefined’일 수 있습니다.”를 억제하는 방법은 무엇입니까?

나는 type:

type tSelectProtected = {
  handleSelector?: string,
  data?: tSelectDataItem[],

  wrapperEle?: HTMLElement,
  inputEle?: HTMLElement,
  listEle?: HTMLElement,
  resultEle?: HTMLElement,

  maxVisibleListItems?: number
}

전역 모듈 단위 변수를 선언합니다.

var $protected : tSelectProtected = {};

function1()범위 에서 적절한 가치를 부여하고 있습니다 .

$protected.listEle = document.createElement('DIV');

나중에 function2()범위 내에서 전화합니다.

$protected.listEle.classList.add('visible');

TypeScript 오류가 발생합니다.

error TS2533: Object is possibly 'null' or 'undefined'

if ($protected.listEle) {$protected.listEle}컴파일러를 진정시키기 위해 명시 적으로 검사를 수행 할 수 있지만 대부분의 사소한 경우에는 매우 적합하지 않은 것 같습니다.

TS 컴파일러 검사를 비활성화하지 않고 어떻게이 상황을 처리 할 수 ​​있습니까?

답변

interface SelectProtected {
    readonly wrapperElement: HTMLDivElement;
    readonly inputElement: HTMLInputElement;
}

const selectProtected: SelectProtected = {
    wrapperElement: document.createElement("div"),
    inputElement: document.createElement("input")
};

// Error, some.expr may be null or undefined
let x = some.expr.thing;
// OK
let y = some.expr!.thing;

if (object !== undefined) {
    // continue - error suppressed when used in this way.
}

const objectX = object as string

const refToElement = useRef(null);

if (refToElement && refToElement.current) {
     refToElement.current.focus(); // Object is possibly 'null' (for refToElement.current)
}

const refToElement = useRef(null);

if (refToElement && refToElement.current) {
     // @ts-ignore: Object is possibly 'null'.
     refToElement.current.focus();
}

refToElement?.current?.focus();

something: null;

something: string = null;