如何抑制“错误TS2533：对象可能为“null”或“未定义”？

Question

我有一个类型：

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.listle）{$protected.listle}进行显式检查，以使编译器平静下来，但对于大多数非平凡的情况来说，这似乎是非常不容易的。

在不禁用TS编译器检查的情况下，如何处理这种情况？

Answer 1

如果需要，可以通过添加注释来抑制（请注意以下事项）

忽略：对象可能为“null”

不是对OP问题的直接回答，但在我的React应用程序中，使用Typescript-v3.6.2

并使用以下代码

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(); 
}

请注意，由于这是编译器错误而不是linter错误，//tslint： disable-next-line不起作用。此外，根据留档，这应该很少使用，只有在必要时才使用

使用Typecript 3.7以后，您可以使用可选的链接来解决上述问题，因为-

refToElement?.current?.focus();

此外，有时可能只是在使用useRef时将适当的类型传递给泛型参数器的问题。
例如：在输入元素的情况下-

const refToElement = useRef<HTMLInputElement>(null);

Answer 2

此功能称为“严格空检查”，用于将其关闭，以确保未设置编译器标志。

然而，null的存在被描述为数十亿美元的错误，因此看到TypeScript等语言引入修复是令人兴奋的。我强烈建议保持开机状态。

解决此问题的一种方法是确保值永远不会为null或未定义，例如通过预先初始化它们：

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

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

不过，请参见Ryan Cavanaugh的答案，以获得另一种选择！

Answer 3

如果从外部手段知道表达式不是空的或未定义的，则可以使用非空断言运算符 强制删除这些类型：

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